select vue.js 的意外下拉行为

Question

如果我从 select 元素中删除 background-green class 绑定或 value 绑定，那么它会像普通下拉菜单一样工作。但是假设我没有删除 background-green class 绑定，那么在 selecting 之后，selected 选项不会显示，但是如果我再次 select相同的 selected 选项或其他选项将显示。 value 绑定的行为相同。那么为什么它第二次工作呢？这是我真实的concern/confusion.

这是运行示例的 link 示例代码。

Answer 1

问题是 :value="defaultValue" 实际上没有改变（因为 defaultValue 永远不会改变）和第一次发生重新渲染的副作用。

因为 :value 基本上总是 ""，任何时候 <select> 是 re-rendered，Vue 将值设置为那个空字符串。

您已 handleInput 设置 fillBg = true 触发 re-render，因为 background-green 不在初始渲染中。这意味着 Vue 会将 <select> 的值重置回 defaultValue（空白）

在第一次选择后出现期间，实际发生的是 DOM 本地状态显示您选择的内容。由于 vdom 没有变化（background-green 已经存在），Vue not re-rendering 因此不会重置值。

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

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

select vue.js 的意外下拉行为

Unexpected select dropdown behaviour with vue.js

html

javascript

css

drop-down-menu

vue.js