Vue.js和jQuery datepicker/timepicker双向绑定

当jQuery和/或更新

值时，使用

元素不起作用。只有当用户在

中键入时，才会发生绑定

当通过日期选择器或时间选择器更新

时，我需要双向绑定。

我以最简单的方式使用Vue.js和jQuery——通过

标记从html文件中导入它们

这个问题，但比我的情况更复杂。我很难弄清楚如何使我找到的解决方案适应我的基本用例（即，我没有使用自定义指令、组件或事件模板）

这是一本书

下面是我的静态代码的主要部分：

<form>
  <input v-model="title" name="title" type="text">
  <input v-model="shortDesc" name="shortDesc" type="text">
  <input v-model="date" name="date" type="text">
  <input v-model="time" name="time" type="text">
</form>

<script>
  var elm = new Vue({
    el: '#preview',
    data: {
      title: '',
      shortDesc: '',
      date: '',
      time: ''
    }
  })

  $(function(){
    $("input[name=date]" ).datepicker({
      dateFormat: 'DD, MM dd'
    });
  });


  $('input[name=time]').timepicker({'scrollDefault': 'now'});
</script>

var elm=新的Vue({
el:'预览'，
数据：{
标题：“”，
shortDesc:“”，
日期：''，
时间：“”
}
})
$（函数（）{
$（“输入[名称=日期]”）。日期选择器({
日期格式：“DD，MM-DD”
});
});
$（'input[name=time]'）。时间选择器（{'scrollDefault'：'now'}）；

我找不到一种纯vue的方法来实现这一点，但您可以通过使用datapicker的回调来实现，您可以在此回调中设置日期变量的值

请参阅工作代码笔

我在您的vue实例中添加了一个挂载块：

var elm = new Vue({
  ...
  ...
  mounted () {
    var vm = this
    $('#datedate').datepicker({
      onSelect: function(dateText) { 
        vm.date = dateText
      }
   })
})

并在日期输入中添加了id属性：

<input v-model="date" name="date" class="block col-12 mb1 field" type="text"  id="datedate">

---

这是一个。

此方法允许vue了解更改，而不是像在其他答案中一样在选择回调中手动设置

vm

上的值

$('#datedate').datepicker({
  onSelect: function(dateText) { 
    $(this)[0].dispatchEvent(new Event('input', { 'bubbles': true }))
  }
});

---

谢谢@saurabh，你的日期选择器代码适合我！我能够使您的代码适应类似但不同的计时器问题的解决方案。我将创建一个答案，在同一个文件中显示这两种解决方案。@BrianZ太好了，这很有帮助，您也可以编辑此答案以使其完整。直接绑定首先不起作用的原因是什么？

$('#datedate').datepicker({
  onSelect: function(dateText) { 
    $(this)[0].dispatchEvent(new Event('input', { 'bubbles': true }))
  }
});