我創建了一個小 jsfiddle，它解釋了錯誤以及如何在此處重現它：https ://jsfiddle.net/4Leu9a6x/57/
我有一個選擇，我使用 @change 和 :value 來更新和顯示值。我知道我可以使用，v-model但我的應用程式相當復雜，所以這是目前唯一的方法。
當我動態更改選項時會出現問題。一旦我更改了它們，select 的值（用戶看到的值）就與實際值（vue 保存在資料中）不同。即使我確實有：價值。
我不明白為什么當 :value 不在選項內時它不顯示灰色選擇（沒有選擇任何內容）。
上面的 jsfiddle 會清楚地顯示這個問題。關于如何保持兩者同步的任何想法？
uj5u.com熱心網友回復：
v-model當 a的選項動態更改時，具有特定的行為來處理這種情況<select>。由于您沒有使用v-model，您必須自己處理這些問題。
像其他輸入元素一樣， a<select>有自己的內部狀態（value和selectedIndex），由瀏覽器維護（不是 Vue）。如果您在不更改值的情況下更改選項，那么當 Vue 重新渲染時，它不會設定選擇的值，因為該值沒有更改，因此您將保留瀏覽器選擇的任何狀態，以及可能的邊界值將與選擇的實際值不同步。
幾個解決方案：
- 系結
key的<select>重新創建元素時的選項改變（小提琴）。 - 將 包裹
<select>在組件中并手動將selectedIndex元素的設定為所選選項的索引。閱讀v-model源代碼以了解 Vue 是如何做到的。 - 當您更改選項資料時，還要更改值資料，使其對應于實際選項。但這并不能解決
<select>在更改選項而不是值后值與任何選項不匹配時選擇 no 選項的問題。
uj5u.com熱心網友回復：
this.val = this.options[0];在運行 shuffle 方法時添加。這是因為每次 shuffle 方法運行時它都會重置選項，因為您的值不是雙向系結的，因此該值不會被更新。否則，您可以折射您的代碼并使用 v-model。
new Vue({
el: "#app",
data: {
val: 2,
options: [1, 2, 3, 4]
},
methods: {
shuffle() {
this.options = [Math.random(), Math.random(), Math.random()]
this.val = this.options[0];
}
}
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/346176.html
下一篇：在所述陣列中保存陣列和物件