时间戳

首页 > 解决方案 > vue.js 的意外选择下拉行为

javascript - vue.js 的意外选择下拉行为

问题描述

如果我从元素中删除background-green类绑定或value绑定，select那么它就像一个正常的下拉菜单一样工作。但是假设我没有删除background-green类绑定，然后在选择后，不会显示所选选项，但是如果我再次选择相同的所选选项或其他选项，则会显示它。与value绑定相同的行为。那么为什么它第二次工作呢？这是我真正关心/困惑的问题。

这是带有示例代码的运行示例的链接。

标签： javascripthtmlcssvue.jsdrop-down-menu

解决方案

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

因为:valueis 本质上是 always ""，所以任何时候<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;
},

推荐阅读