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;
//--赋值给对应的元数据数组以手动实现双向绑定
当我在页面上通过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)