記錄一個開發中使用element ui遇到的問題,在給select 賦予初始值的時候,不能修改,准確說,data中的值已經改變了,但視圖上沒有更新。
<el-select clearable size="mini" placeholder="理由" v-model="reason[scope.row.id]" multiple > <el-option v-for="item in options[name]" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select>
在網上找了很多,發現都不能解決問題,比如$forceUpdate(),因為根本就無法出發select的change事件,最后發現是在初始賦值時出現了問題,因為select綁定的是一個對象的屬性,因此使用普通的=賦值后,vue不能檢測到對象屬性的修改,所以在初始賦值時,先使用$set()初始化。
this.$set(this.reason, row.id, []); if (row.is_pass == 0) { this.$set(this.reason, row.id, row.reason.split(",")); }
所以,重點就是設置初始值時一定要使用$set()