- A+
所属分类：Web前端
工作中需要做一个动态配置配送时间功能，前端是用的vue。代码格式如：
1 <table class="tbDeliDate" cellspacing="0" cellpadding="0"> 2 <tr v-for="(item,index) in listDeliDateSpri"> 3 <td>配送时间：<input class="Wdate" onfocus="WdatePicker({dateFmt: 'yyyy-MM-dd'});" 4 type="text" v-model="item.deliDate" /></td> 5 <td>配送时间别名：<input type="text" v-model="item.deliDateAlias" /></td> 6 <td><a href="javascript:" class="aDeliDateDele" v-on:click="deleteDeliDate(index)">删除</a></td> 7 </tr> 8 </table>
结果调试时vue与datepicker设置input值时冲突。v-model与WdatePicker内部机制都是监听value属性，导致日期控件选中的值vue识别不到。然后网上搜解决方法，可以通过datepicker的自定义事件onpicking折中处理。代码如下：
1 <input class="Wdate" onfocus="WdatePicker({ onpicking: function (dp) { vm.$data.listDeliDateSpri[vm.$data.currSeleRow].deliDate = $dp.cal.getNewDateStr(); } });" 2 type="text" v-model="item.deliDate" v-on:click="remeCurrRow(index)" />
因为我这里是动态的配送时间，是对数组中的某一项赋值，所以在文本框单击时记录下来是在哪一行操作，然后给这一项设置日期。
注意：旧版本datepicker可能会没有getNewDateStr函数，引用datepicker新版即可。
至此，问题解决，特此记录。
