Vue.js：触发 select 更改为 jQuery 后更新 v-model 值

Question

HTML:

<select v-model="model">
    <option hidden disabled v-bind:value="false" selected>Placeholder</option>
    <option v-for="item in array" v-bind:value="item.id"> @{{ item.name }}</option>
</select>

我有一个与上面非常相似的 select，我正在使用一些 jQuery 来更新 select 框。但是，我似乎无法更新 v-model 以与 jQuery 更改保持一致。

jQuery:

.on('mousedown', '.class', function (evt) {
    evt.preventDefault();
    $(this).find('option:first').prop('selected', true).val(false).change();
});

这里的 jQuery 在清除按钮上侦听 mousedown 事件，select 是占位符选项，即重置 select 框。但是我希望 .val(false).change() 足以触发 v-model 更新 - 但事实并非如此。

Answer 1

你可以试试 v-model.lazy 这个：

<select v-model.lazy="model">

Answer 2

自从发布这篇文章后，我做了更多的研究，我偶然发现了这个 Whosebug question。

jQuery 更改事件未触发本机侦听器时出现问题。

为了解决这个问题，我根据通过 link 找到的投票最多的答案添加了一个片段。

evt.preventDefault();
$(this).removeClass('x onX').find('option:first').prop('selected', true);

let el = $(this).get(0);
let event = document.createEvent('Events');
event.initEvent('change', true, false);
el.dispatchEvent(event);

Vue.js：触发 select 更改为 jQuery 后更新 v-model 值

Vue.js: update v-model value after triggering select change with jQuery

html

javascript

jquery

vue.js

jquery-events