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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值