关于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();
  }

来自 <http://www.jb51.net/article/114386.htm>
</code>

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

转载于:https://www.cnblogs.com/kengwfpzu920/p/7246067.html