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

我和小伙伴们
  • 46

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

clipboard.png

代码如下:

<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();
        }
    }


评论
阅读 12.1k
5 个回答

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

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

// $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到是做了解释,在非生产环境下才有这个警报,应该是可以假装看不见的 :)

liangjilin
  • 2
新手上路,请多包涵

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

宣传栏