1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 关于datetimepicker和vue v-model指令双向数据绑定失败的问题

关于datetimepicker和vue v-model指令双向数据绑定失败的问题

时间:2023-05-04 00:35:24

相关推荐

关于datetimepicker和vue v-model指令双向数据绑定失败的问题

关于datetimepicker和vue v-model指令双向数据绑定失败的问题

1,v-model监听用户输入事件以更新数据,并特别处理一些极端的例子。这是v-model指令的解释。

2,解决方案

通过日期控件隐藏时,通过vue.set方法赋值。代码如下

<code>

Vue.set(pricecollectorVue.rowTemplate,ev.target.id, $(ev.target).val());

</code>

3,问题再新

input使用v-model,再配上日历控件的时候,在控件选择好日期(时间)后,你再其它v-model的元素上输入内容时,刚才的控件内容被清空。再试一次,可能是错觉。

F5,选择日期,输入内容……

我靠,==!,这是发生了什么情况,再也不能平静的写代码和测试了。日期控件搞事?你是大爷,那换一个控件继续撸。

努力的coding

F5,选择日期,输入内容……

我靠,==!,这是人品的问题吧。

百度搜索关键词:vue datetimepicker

4,继续翻v-model的文档,结合源码分析。

v-model失效(双向数据绑定失败)的原因,是因为没有触发input,change事件,因为我们是通过DOM赋值过去的。知道原因后,那沿着问题一步步解决,给input的v-model添加lazy修饰符。日期控件选值后赋值给input后,触发change事件。重复上面的测试,结果:Fail!……

看人家案例,各种方式撸,感觉不好,删除重来。最后使用vue mounted事件看到苗头,代码如下。

<code>

methods: {

dateDefind () {

var self = this;

//初始化

$('#messageSendTime').datetimepicker({

minView: "hour", //选择日期后,不会再跳转去选择时分秒

language: 'zh-CN',

format: 'yyyy-mm-dd hh:ii:ss',

todayBtn: 1,

autoclose: 1

});

//当选择器隐藏时,讲选择框只赋值给data里面的time

$('#messageSendTime').datetimepicker()

.on('hide', function (ev) {

var value = $("#messageSendTime").val();

self.time = value;

});

}

},

mounted: function () {

this.dateDefind();

}

来自 </article/114386.htm>

</code>

继续深入改造。才有最终的解决方案

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。