使用$set方法解决ElementUI的el-select的@change操作失效的状况

在这篇文章中，我们来学习一下“使用$set方法解决ElementUI的el-select的@change操作失效的情况”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一起来学习一下吧。

在VUE中使用ElementUI的el-select下拉框，它是通过接口异步获取的下拉框数据，选择某一个值后，虽然在绑定的 @change 事件中能够看到已赋值成功，控制台输出也显示赋值操作完成数据变化，但是框上却没有显示选中的值。

VUE它是无法监听动态新增的属性的变化，但是有一个方法可以为动态属性赋值，那就是$set。 

<template>

  <el-select

    v-model="value"

    multiple

    filterable

    allow-create

    default-first-option

    placeholder="请选择文章标签">

    @change="selectChange"

    <el-option

      v-for="item in options"

      :key="item.value"

      :label="item.label"

      :value="item.value">

    </el-option>

  </el-select>

</template>

<script>

  export default {

    data() {

      return {

        paper:[{

            title:'',

            author:''

        }]

        options: [{

          value: '1',

          label: 'HTML'

        }, {

          value: '2',

          label: 'CSS'

        }, {

          value: '3',

          label: 'JavaScript'

        }],

        value: []

      }

    },methods{

        // 操作下拉框选中事件

        selectChange(val) {

            const title = this.options.find(item=>item.value===val).label   

            this.$set(this.paper, this.paper.title, title)    

        }

    }

  }

</script>

VUE下拉框数据及数据回显问题

下拉框默认显示第一个数据，及获取下拉框中选择的任意数据：

<label>类型：</label>

 <select v-model="value_type" @change="getvalue_typeected(value_type)">

   <option :value="item" v-for="item in types" :key="item">{{

     item

   }}</option>

 </select>

export default {

    data(){

        return {

            value_type: "",

              types: ["STRING", "BOOLEAN", "INTEGER",'DATETIME','DATE'],

        }

    },

    created(){

        //下拉框默认显示第一个

        this.value_type = this.types[0];

    },

    methods:{

        getvalue_typeected(val) {

          this.value_type = val;

        },

    }

}

下拉框数据回显：

getCurIdData() {

  this.$http

    .get(`/api/${id}`)

    .delegateTo(api_request)

    .then((data) => {

      this.value_type= data.value_type;

    });

}

以上就是关于“使用$set方法解决ElementUI的el-select的@change操作失效的情况”的介绍了，感谢各位的阅读，如果大家想要了解更多相关的内容，小编每天都会为大家更新不同的知识。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!