vue.js 的意外選擇下拉行為

Question

如果我從select元素中刪除background-green類綁定或value綁定，那么它會作為一個普通的下拉列表工作。 但是假設我沒有刪除background-green類綁定，然后選擇后，所選選項不會顯示，但如果我再次選擇相同的所選選項或其他選項，則會顯示它。 與value綁定相同的行為。 那么為什么它第二次工作呢？ 這是我真正的擔憂/困惑。

這是運行示例與示例代碼的鏈接。

Answer 1

問題是:value="defaultValue"實際上沒有改變（因為defaultValue永遠不會改變）以及第一次發生重新渲染的副作用的混合。

由於:value本質上始終是"" ，因此每當<select>重新渲染時，Vue 都會將該值設置為該空字符串。

您有handleInput設置fillBg = true觸發重新渲染，因為background-green不在初始渲染中。 這意味着 Vue 會將<select>的值重置回defaultValue （空白）

在第一次選擇后它似乎工作的時間內，實際發生的是 DOM 本地狀態顯示您選擇的內容。 由於 vdom 沒有變化（背景綠色已經存在），Vue不會重新渲染，因此不會重置值。

解決此問題的正確方法是在輸入事件期間更新defaultValue （可能重命名）或使用v-model 。 關鍵是讓 Vue 在任何時候渲染時都設置正確的值。

handleInput(e) {
  this.fillBg = true;
  this.defaultValue = e.target.value;
},