Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SSR开发环境下XInput不使用slot restricted-label出现Warning问题 #2201

Closed
z-hao opened this issue Nov 15, 2017 · 5 comments
Closed

Comments

@z-hao
Copy link

z-hao commented Nov 15, 2017

SSR的开发环境下,调用XInput组件,如果没有slot restricted-label,会有server side 与 client side virtual dom不一致的warning,如下

<x-input v-model="quantity" :is-type="number" :max="14" :placeholder="数量"></x-input>


vue.runtime.esm.js:5612 Parent:  <div class=​"weui-cell__hd">​…​</div>​
Mismatching childNodes vs. VNodes:  (3) [div, comment, comment] (3) [VNode, VNode, VNode]

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

使用slot restricted-label时则没有

<x-input v-model="quantity" :is-type="number" :max="14" :placeholder="数量">
  <span slot="restricted-label"></span>
</x-input>

看了一下XInput源码,主要是因为在client端非hasRestrictedLabel的时候

<div class="weui-cell__hd">
  <div :style="labelStyles" v-if="hasRestrictedLabel">
    <slot name="restricted-label"></slot>
  </div>
  ...

这部分代码会转成注释 <!---->

不知这个问题会不会改善下?

@airyland
Copy link
Owner

这个问题看起来更像是 ssr 渲染的问题而不是组件的问题。

@airyland airyland added the ssr label Nov 15, 2017
@z-hao
Copy link
Author

z-hao commented Nov 16, 2017

是hasRestrictedLabel的默认值的问题?hasRestrictedLabel的默认值是this.$isServer

data () {
    let data = {
      hasRestrictedLabel: this.$isServer,
      firstError: '',
      forceShowError: false,
      hasLengthEqual: false,
      valid: true,
      currentValue: '',
      showErrorToast: false
    }
    return data
  },
  ...

this.$isServer指的是服务端环境吧,到了客户端这个值就不一样了。我试了一下把它设为默认hasRestrictedLabel: false,就没有warning了。

@airyland

@airyland
Copy link
Owner

你服务端渲染用的 vue 是哪个版本?

@z-hao
Copy link
Author

z-hao commented Nov 16, 2017

我是用nuxt 1.0.0-rc9, vue 2.4.4

@AbsenceSliet
Copy link

AbsenceSliet commented Oct 12, 2018

@z-hao @airyland 请问你有碰到过这个问题么 #3143

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants