jquery - 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');

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

您可以“手动”触发 Vue 将响应的事件:

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

Vue 会将其识别为常规的原生 input evnet。