VUE使用ElementUI下拉框@change事件數據不回顯怎么解決

這篇文章主要介紹了VUE使用ElementUI下拉框@change事件數據不回顯怎么解決的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇VUE使用ElementUI下拉框@change事件數據不回顯怎么解決文章都會有所收獲，下面我們一起來看看吧。

使用ElementUI下拉框 @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;
    });
}

關于“VUE使用ElementUI下拉框@change事件數據不回顯怎么解決”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“VUE使用ElementUI下拉框@change事件數據不回顯怎么解決”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。