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>

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;
      //--赋值给对应的元数据数组以手动实现双向绑定
  }

2022.6.3日（长期有效）：打个广告，苏州华为终端BG面向社会招聘人才，Java /C C++ / Python / Javascript 。有兴趣来苏州的同学们 可以加我V 15850277051 ，走内推流程，有问必答！