Vue v-model不會觸發第三方下拉菜單

Question

我有一個select元素定義為

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

如果按mySelectValue使用，當用戶更改選擇輸入時， 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>