Vue的v型模型不与第三方下拉菜单

触发我有定义为Vue的v型模型不与第三方下拉菜单

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

来源

2016-12-15 Mikko

你以前或'selectize'调用后迷上了变化监听器？我怀疑，这些库从DOM中删除元素，并将其重新插入其他地方剥离所有附加的处理程序等。 –

@MathewJibin我检查了DOM：原始元素仍然完好无损。这两个库都设置了“display：none”，并在原始select元素后插入他们自己的自定义结构。使用Chrome开发工具，我再次使原始元素可见，并试图改变它的价值。它仍然在Vue中触发'v-model'变化。这也给了视觉确认，原始的和自定义的下拉链接作为更新，任何一个改变了另一个。 – Mikko

不知道，尝试使用jquery'val'方法从控制台更改值，它是否仍然触发它？图书馆内的某个人可能会压制事件泡沫，以避免循环更新或什么？ –

你应该值属性添加到<option>

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

来源

2016-12-15 09:19:40 Cecil

我确实有价值属性，但我从问题的片段中删除了它们。 – Mikko

Vue的v型模型不与第三方下拉菜单

回答

相关问题