VUE element-ui组件中input和select组件的绑定的值偶尔异常的情况

element-ui组件中input和select组件是我们比较常用的两个组件

在使用的过程中偶尔会出现一个比较奇怪的现象,显示的值总是慢一拍，不是自己刚刚输入/选中的，上一次输入/选中的值

例如input在输入后，每次输入值后，显示的都是上一次的值：
键盘输入： a
此时input文本框中没有值显示
键盘再次输入： b
此时input文本框中显示：a
键盘再次输入： c
此时input文本框中显示：ab

select组件偶尔也会出现类似的情况
比如
select的下拉选项选择一个值：选项1
select框没有显示选中项
select的下拉选项再次选择一个值：选项2
select框显示的值为：选项1
select的下拉选项再次选择一个值：选项3
select框显示的值为：选项2

这样的情况发生大概率是因为input/select绑定的某一个对象下的一个属性，这个属性又没有在此对象中定义
html代码：

<div class="app-container">
<el-input v-model="form.val" placeholder="请输入内容"></el-input>
<el-select v-model="form.value" placeholder="请选择">
<el-option label="选项1" value="1"></el-option>
<el-option label="选项2" value="2"></el-option>
</el-select>

js代码：

<script>
export default {
data() {
return {
form: {} // 这是一个空对象，没有定义属性
}
}
}
</script>

解决这样的办法很简单，只需要把data定义的form中加上对应的属性就行

<script>
export default {
data() {
return {
form: {
val: '',
value: ''
}
}
}
}
</script>

最后

以上就是彪壮小蝴蝶为你收集整理的VUE element-ui组件中input和select组件的绑定的值偶尔异常的情况的全部内容，希望文章能够帮你解决VUE element-ui组件中input和select组件的绑定的值偶尔异常的情况所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。