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

【问题标题】：Vue v-model doesn't trigger with third party dropdownsVue v-model 不会触发第三方下拉菜单
【发布时间】：2017-04-30 18:38:31
【问题描述】：

我有一个选择元素定义为

<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？

【问题讨论】：

您是在selectize 调用之前还是之后挂钩了更改侦听器？我怀疑，这些库从 dom 中删除了元素并将其重新插入到其他地方，从而剥离了所有附加的处理程序等。
@MathewJibin 我检查了 DOM：原始元素仍然完好无损。两个库都设置display: none 并在原始选择元素之后插入自己的自定义结构。使用 Chrome 开发工具，我使原始元素再次可见并尝试更改它的值。它仍然会触发 Vue 中的 v-model 更改。这也可以直观地确认原始下拉列表和自定义下拉列表是链接的，因为更新其中一个会更改另一个。
很高兴知道，尝试使用 jquery val 方法从控制台更改值，它仍然会触发它吗？库中某处的某个人可能正在抑制事件气泡，可能是为了避免循环更新或其他什么？

【解决方案1】：

你应该给<option>添加一个值属性

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

【讨论】：