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>