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型模型不與第三方下拉菜單

回答

相關問題