iview datepicker的一个坑以及解决方案

问题产生
当我在页面上通过v-for类似的形式使用多个iview的date-picker,并且所有的date-picker采用同一个处理函数处理时,由于我的原始数据不是date类型,所以我无法通过双向绑定的形式修改原始数据。只能通过api中的on-change。但问题是我发现我无法通过iview的@on-change来区别到底是哪个date-picker的变化。

<DatePicker @on-change = "process_change"  :value ="item.value" v-for = "item in data_arr"></DatePicker>
1
data_arr 数据集合某一项如下

{
  "key":"key_1",
  "value":"2018-09-18"
}



问题解决
在process_change处理函数中传入数据的key值来区分。
修改上述代码,给每个DatePicker绑定一个特定ref。

<DatePicker :ref="`date_picker_${item.key}`" @on-change = "process_change(item.key)"  v-for = "item in data_arr"></DatePicker>

 process_change(key)
  {
     var picker = this.$refs[`date_picker_${key}`];
     var newVal = picker.visualValue;
      //--赋值给对应的元数据数组以手动实现双向绑定

}



vue el-date-picker 直接赋值不生效、数据绑定无效



<el-date-picker v-model="form.expireTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%;" size="small" ></el-date-picker>

当直接给form.expireTime 赋值是 form.expireTime = value , 界面没有变化。但是form.expireTime值已经更新了。

原理:受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。
要处理这种情况,我们可以使用$set()方法,既可以新增属性,又可以触发视图更新。

this.$set(form, "expireTime", value)



玩咖指针 2021-03-12 14:27:33