iview Date-picker 点击报“$attrs is readonly”错误

Question

我在用iview写日期选择器的时候，发现只要我点击Date-picker，控制台就会报$attrs is readonly的警告，虽然也可以使用，但如果点的过于频繁或是每次点击都要与后台进行交互的时候还是会影响。
报错截图如下：

代码如下：

<Row>
    <i-col :span="12">
        <Form-item prop="createTimeBegin" class="form-item-style" label="下单时间：">
            <Date-picker
                    type="date"
                    placeholder="开始日期"
                    :options="formatDatePicker"
                    style="width: 200px;
                        display: inline-block;"
                    v-model="checkSearchForm.createTimeBegin">
            </Date-picker>
        </Form-item>
    </i-col>
    <i-col :span="11">
        <Form-item prop="createTimeEnd" class="form-item-style">
            <Date-picker
                    type="date"
                    placeholder="结束日期"
                    :options="formatDatePicker"
                    style="width: 200px;
                    display: inline-block;"
                    v-model="checkSearchForm.createTimeEnd">
            </Date-picker>
        </Form-item>
    </i-col>
</Row>

":options"的代码如下：

    formatDatePicker : {
        disabledDate (date) {
            //禁止可选日期大于当前日期
            return date && date.valueOf() > Date.now();
        }
    }

Answer 1

iview实际使用的vue版本和你项目实际的vue版本不同造成的问题, 解决办法是安装相同版本的vue. 另外: vue-template-compiler 这个插件也安装和vue相同版本的.

Answer 2

你传入的options是什么值？ 其他的值我没发现有什么问题，应该是这个options这个值的问题。

Answer 3

// $attrs & $listeners are exposed for easier HOC creation.
  // they need to be reactive so that HOCs using them are always updated
  const parentData = parentVnode && parentVnode.data
  /* istanbul ignore else */
  if (process.env.NODE_ENV !== 'production') {
    defineReactive(vm, '$attrs', parentData && parentData.attrs, () => {
      !isUpdatingChildComponent && warn(`$attrs is readonly.`, vm)
    }, true)
    defineReactive(vm, '$listeners', vm.$options._parentListeners, () => {
      !isUpdatingChildComponent && warn(`$listeners is readonly.`, vm)
    }, true)
  } else {
    defineReactive(vm, '$attrs', parentData && parentData.attrs, null, true)
    defineReactive(vm, '$listeners', vm.$options._parentListeners, null, true)
  }

源代码里面对这个warn到是做了解释，在非生产环境下才有这个警报,应该是可以假装看不见的 :)

Answer 4

亲 解决了吗？我也遇到相同的问题了

Answer 5

我用element是也出现过类似问题，原因是我用了webpack Dllplugin, 当我不使用这个插件做优化时，这个问题就没有了。所以我觉得可能是一些打包程序出了问题，而不是vue的版本。

相关参考：https://forum.vuejs.org/t/vue...
https://github.com/ElemeFE/el...