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

Posted 2023-02-22

【中文标题】v-model 不会检测到由 jQuery 触发事件所做的更改

【英文标题】：v-model won't detect changes made by jQuery trigger event

【发布时间】：2018-08-21 23:42:12

【问题描述】：

对于 Vue.js，我使用的是 jQuery Tempus Dominus datepicker。

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

但这不起作用。

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

【参考方案1】：

命令

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

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

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

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

而且 Vue 会将其识别为普通的原生 input evnet。

【讨论】：

这个效率很高