vue el-select 修改下拉框选择但展示不改变

1 问题简介

　　使用<el-select><el-option></el-option></el-select>下拉框时，修改了options数组的值。

　　从控制台中可以看到options中的值已经变化，但是页面展示仍为旧数据，没有变化

<el-select
  ref="select"
  v-model="value"
  placeholder="请选择"
  style="width: 250px"
>
    <el-option
     v-for="item in options"
     :key="item.id"
     :label="item.label"
     :value="item.value"
    >
    </el-option>
</el-select>

 

2 问题分析

1）可能性1

:value="item.value"这里绑定的value值的格式类型和v-model="value"这里的value的格式类型不一样，如前面的是数字，后面的是字符串
发现格式类型没问题

2）可能性2

　　vue监听动态属性的变化错误，没有监听到值的变化，渲染失败

 

3 解决方案

　　针对可能性2

1）方案1

　　在el-select上绑定change方法，在选项值发生变化时进行$set赋值

changeData(val) { // 此处val为value的值
        if(val){
            this.$set(this.form, this.form.year, val)
        }else{
            this.$set(this.form, this.form.year, '')
        }
    }

 

2）方案2

　　使用$foreceUpdate()每当值发生变化时进行强制渲染

　　我采用的这种方案，有效

changeData() { // 修改时没有监听到变化，强制渲染可以解决
      this.$forceUpdate()
}