Vue.js和jQuerydatepicker/timepicker双向绑定

Question

Two-way binding with Vue.js using an <input> element doesn't work when jQuery datepicker and/or timepicker 更新 <input> 值。只有当用户在 <input>.

中键入时才会发生绑定

当 <input> 通过日期选择器或时间选择器更新时，我需要双向绑定。

我正在以最简单的方式使用 Vue.js 和 jQuery -- 通过 <script src=""></script> 标签从我的 html 文件中导入它们。

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

这里是codepen of my working code.

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

<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>

Answer 1

我无法找到一个纯 vue 的方法来做到这一点，但你可以通过使用数据选择器的 onSelect 回调来做到这一点，你可以在这个回调中设置日期变量的值。

查看工作代码笔 here。

我已经在你的 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">

编辑

因为时间选择器没有onSelect option that datepicker does, a solution is to use the changeTime event which is shown in action in the "Event Example" in the timepicker demo docs。

下面的代码为更新后的 Vue 脚本提供了 jQuery 日期选择器和时间选择器的解决方案：

var elm = new Vue({
  ...
  ...
  mounted() {
    var vm = this
    $('input[name=date]').datepicker({
      dateFormat: 'DD, MM dd',
      onSelect: function(dateText) {
        vm.date = dateText
      }
    }),
    $('input[name=time]').timepicker({'scrollDefault': 'now'}).on('changeTime', function() {
      vm.time = $('input[name=time]').val();
    })
  }
})

这里是 new codepen verifying both @saurabh's datepicker solution and @BrianZ's timepicker solution.

Answer 2

这种方法允许 vue 接受更改，而不是像其他答案那样在 select 回调中手动设置 vm 的值。

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

Vue.js和jQuerydatepicker/timepicker双向绑定

Vue.js and jQuery datepicker/timepicker two-way binding

data-binding

jquery

jquery-ui-datepicker

vue.js