Element: [Bug Report] 使用 nuxt.js el-table 组件不能通过 <nuxt-link> 不能设置页面 title

[Xiongzhenyu]

Element UI version

1.2.8

OS/Browsers version

win10 / chrome 57.0.2987.133

Vue version

2.2.6

Reproduction Link

https://jsfiddle.net/pj71jkyw/

Steps to reproduce

What is Expected?

希望在通过 to outher page 能够正确显示 head:title

What is actually happening?

当刷新页面的时候 是能够加载title的

[ausir0726]

hi , I was tested on Glitch .

If use Table component on page , when it created will clean head ( nuxt.js use vue-meta )
If just Button component , every thing is OK

And , I just download component source and move Table in my project , vue-meta is working as normal .

Glitch test page
https://mica-sociology.glitch.me/

source code

thanks .

[Xiongzhenyu]

@ausir0726 thanks for you source code

[ausir0726]

Issue reproduction video gif

Just happend when you change link to the page have Table component .
titile will beccome http://xxx.xx.xx , actually is page with table

[HadiChen]

Is there a way to avoid this problem?

[mikhailbot]

Can also confirm this with date picker and time picker

Detailed info with live sit and GIF: https://github.com/nuxt/nuxt.js/issues/664#issue-226443700
Sample repo: https://github.com/mikhailbot/elementui-test

[yuchonghua]

@QingWei-Li @Leopoldthecoder Why is this problem no one to deal with it?

[axu6705]

都去搞 element-react 了吗？都不管这个bug了。

[heww]

i debug this and find that it maybe the bug of vue-meta or element Tooltip component.

vue-meta will check the meta and then refresh it before component mounted, but unlucky tooltip's $root is not __nuxt element. vue-meta can not get meta info from Tooltip so it use the default meta info which title is empty string, then document's title is set to empty by vue-meta.

there are there ways to solve this bug:

1、make the $root of Tooltip to be __nuxt which provide the right meta info for vue-meta, but i think it may be difficulty.

2、vue-meta change the title of default meta info to undefined so that it can updateTitle to document.title

3、vue-meta refresh meta info for component only its computed $metaInfo exists

i think the 3rd way is the right way to solve this bug.

[yuchonghua]

@Leopoldthecoder 这个问题方便处理一下吗？

[Atinux]

It should be fixed now with https://github.com/declandewet/vue-meta/releases/tag/v1.0.4

[DonNicoJs]

@Atinux I can still reproduce this with vue-meta 1.5.6, but the code fix should be inside. I will try to post a precise reproduction video / PR if I manage to deal with it

[jamesAtcodeninja]

@Atinux @lordfuoco I too am noticing this issue for tooltip, date-picker, and loading.

Radio and popover does not seem to trigger this however.

Package Version:
nuxt: 2.4.3
element-ui: 2.4.10

[jinusean]

I am currently using this quick fix, install it in the plugins of your nuxt.config.js and set ssr: false

export default function watchTitle() {
  let isRefreshing = false

  const observer = new MutationObserver(function(mutations) {
    const newValue = mutations[0].target.nodeValue
    if (newValue || isRefreshing) {
      isRefreshing = false
      return
    }
    isRefreshing = true
    $nuxt.$meta().refresh()
  })

  const target = document.querySelector('head > title')
  const config = { subtree: true, characterData: true, childList: true }
  observer.observe(target, config)
}

[DonNicoJs]

@jinusean thank you for the workaround! I will try to use it!

[peterodet]

@jinusean thank you. Your fix worked!