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模型以与jQuery更改保持一致。

jQuery的：

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

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

Answer 1

您可以尝试password_hash()：

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

Answer 2

自发布以来我做了很多研究，我偶然发现了stackoverflow question。

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

Vue.js：在使用jquery触发select更改后更新v-model值

2 个答案: