Vue v-model不会触发第三方下拉菜单

Question

我有一个定义为

的select元素

<select v-model="mySelectValue">
    <option v-for=...>...</option>
</select>

如果按原样使用，当用户更改选择输入时，mySelectValue会正确更新。

现在我想要输入样式。我试过Selectize.js：

$('select').selectize();

选择输入现在使用新外观和功能，但更改值不会更新mySelectValue。我以为原来的选择输入会用Selectize.js更新，所以我尝试了Dropdown.js。同样的事情。

使用jQuery我将一个更改侦听器挂钩到原始选择输入：

$('#mySelect').change(function() { 
    console.log($(this).val()); 
});

使用这两个库中的任何一个，我看到触发了更改事件并更新了原始选择输入。

为什么Vue不更新​​mySelectValue？

Answer 1

您应该将值属性添加到<option>

<select v-model="mySelectValue">
   <option value='1'>one</option>
   <option value='2'>two</option>
   <option value='3'>three</option>
</select>