Vue.js：使用 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>

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

jQuery：

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

此处的 jQuery 侦听清除按钮上的mousedown事件，该按钮选择占位符选项，即重置选择框。 但是我希望.val(false).change()足以触发 v-model 更新 - 它不是。

Answer 1

自从发布这篇文章以来，我做了更多的研究，我偶然发现了这个stackoverflow 问题。

这是 jQuery 更改事件不触发本机侦听器的问题。

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

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

Answer 2

您可以为此尝试v-model.lazy ：

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