1. 程式人生 > >vue對select下拉框賦初值後,不能進行選擇的問題

vue對select下拉框賦初值後,不能進行選擇的問題

Vue使用elementUI的select選擇器出現的問題:

     初始化賦值後,無法更改label值,資料已經改變,但UI樣式為未變

原因:由於對此物件做了一些處理(將物件的鍵全部轉換成小寫),改變了物件的鍵和值,但是由於Vue檢測不到物件的變化,導致這個問題

解決方案:使用Vm.$set方法,詳情見api官方文件

 具體程式碼如下:

HTML部分

<el-form-item label="Server Area" prop="area">

<el-select v-model="reqData.area" placeholder="all">

<el-option v-for="(item,index) in area" :key="index" :value-key="index" :label="item" :value="item">

</el-option>

</el-select>

</el-form-item>

js部分

async getdata() {

let res = await this.$http.get(

`${api.server}?serverid=${this.$route.query.id}`

);

this.reqData = res.Data.status[0];

this.reqData.area="zh"

let data = {};

for (let key in this.reqData) {

this.reqData[key.toLowerCase()] = this.reqData[key];

if(key!="Area"){

delete this.reqData[key];

}

}

this.$set(this.reqData,"area",this.reqData.Area);

delete this.reqData.Area;

},