欢迎光临
我的个人博客网站

datepicker与Vue的input on-model冲突解决办法

工作中需要做一个动态配置配送时间功能,前端是用的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新版即可。

至此,问题解决,特此记录。

赞(0) 打赏
未经允许不得转载:张拓的天空 » datepicker与Vue的input on-model冲突解决办法
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏