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

[z-hao]

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]

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

[z-hao]

是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]

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

[z-hao]

我是用nuxt 1.0.0-rc9, vue 2.4.4

[AbsenceSliet]

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