vue解决el-select下拉框不显示label问题

问题描述:

       最近在开发项目的过程中，遇到了这个问题。el-select的下拉框数据是后端返回的，当点击下拉框选项时会请求后端的接口，当在请求接口的过程中label是有显示的，但是在请求完成后，label就没有显示了。

问题来源:

       vue无法监听动态新增属性的变化，所以当向后端请求数据完成时，这时对应的v-model绑定的值是响应式的，这时候vue是无法监听到的。

解决方法:

      使用this.$set()方法。

      this.$set()方法官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')。

    以下是我的部分代码：

   

<el-select v-model="editObject.valueSelect" @change="handleChange">
      <el-option
       v-for="item in datedown"
       :key="item"
       :label="item"
       :value="item"
       >
       </el-option>
 </el-select>

 

data(){
 return{
    //v-model绑定的值
    editObject:{
        valueSelect:"",
      },
 }
}

handleChange(value) {
      //调用的接口
      this.getNews();
      this.$set(this.editObject,this.editObject.valueSelect,value)
 },

注：v-model绑定的值须是object.prop的形式。