Javascript vue.js出现意外的选择下拉行为

如果我从

select

元素中删除

background绿色

类绑定或

value

绑定，则它将作为正常下拉菜单工作。但是假设我没有删除

背景绿色

类绑定，那么在选择之后，所选选项不会显示，但是如果我再次选择相同的所选选项或其他选项，则会显示它。与

值

绑定的行为相同。那为什么它第二次起作用呢？这是我真正的担忧/困惑

---

下面是使用示例代码运行示例的示例。

问题在于

：value=“defaultValue”

实际上没有更改（因为

defaultValue

从未更改）以及第一次发生重新渲染的副作用的混合

由于

：value

基本上总是

”

，因此每当重新呈现

时，Vue都会将该值设置为该空字符串

您有

handleInput

设置

fillBg=true

，这会触发重新渲染，因为

背景绿色

不在初始渲染中。这意味着Vue将把

的值重置回

默认值（空白）

在第一次选择之后它似乎起作用的过程中，实际发生的是显示所选内容的DOM本地状态。由于vdom没有更改（背景绿色已经存在），因此Vue不会重新渲染，因此不会重置该值

解决此问题的正确方法是在输入事件期间更新
defaultValue
（可能重命名此值）或使用。关键是要让Vue在渲染时设置适当的值

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

问题既有
：value=“defaultValue”
没有实际更改（因为
defaultValue
从未更改）的混合，也有第一次出现重新加载的副作用

由于
：value
基本上总是
”
，因此每当重新呈现
时，Vue都会将该值设置为该空字符串

您有
handleInput
设置
fillBg=true
，这会触发重新渲染，因为
背景绿色
不在初始渲染中。这意味着Vue将把
的值重置回
默认值（空白）

在第一次选择之后它似乎起作用的过程中，实际发生的是显示所选内容的DOM本地状态。由于vdom没有更改（背景绿色已经存在），因此Vue不会重新渲染，因此不会重置该值

解决此问题的正确方法是在输入事件期间更新
defaultValue
（可能重命名此值）或使用。关键是要让Vue在渲染时设置适当的值

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