v-model 不会检测 jQuery 触发事件所做的更改

Question

使用 Vue.js 我正在使用 jQuery Tempus Dominus 日期选择器。

<input type="text"
       class="form-control datetimepicker-input"
       id="confirmedDueDate"
       data-target="#confirmedDueDate"
       @focus="openDatetimePicker($event)"  //to show the datetimepicker
       @blur="closeDateTimePicker($event)"  //to close it
       v-model="taskSettings.confirmedDueDate"
       />

我面临以下问题：v-model 无法检测到 datetimepicker 所做的更改。

我想我可以在关闭选择器时触发一个事件：

$('#confirmedDueDate').trigger('change');
//or
$('#confirmedDueDate').trigger('input');

但是用这个不行。

是否有针对此类情况的已知解决方法？

Answer 1

命令

$('#confirmedDueDate').trigger('input');

触发 Vue 无法识别的 jQuery.Event Object，因为它只知道原生 DOM 事件。

您可以触发 "manually" Vue 将响应的事件：

$('#confirmedDueDate')[0].dispatchEvent(new CustomEvent('input'));

并且 Vue 会将其识别为常规本机 input evnet。

v-model 不会检测 jQuery 触发事件所做的更改

v-model won't detect changes made by jQuery trigger event

jquery

vue.js

jquery-events

vuejs2