Vue進階（幺肆零）：vue數組或對象更新后，視圖不更新的解決方案

在項目開發過程中，若將頁面元素全部綁定于一個表單中，且頁面中的某些元素并未直接獲得，在獲取頁面操作值時就會出現意外效果，例如不能重置頁面元素。

場景復現

需求：在使用el-select設計表單下拉框時，若后臺返回的下拉框數組長度為1，則默認選中第一個元素。

思路：后臺返回值后直接將第一個元素的value賦值給el-select的v-model。

created() { .... this.MissionTemplateForm.state = this.StatusOptions[0].display_name },

1

2

3

4

但是后臺方法返回值后，為el-select賦值前，MissionTemplateForm已經賦值了response.returnobj，導致MissionTemplateForm的結構被破壞，故需要對MissionTemplateForm中的屬性進行重新設定。需要使用

Vue.set( target, propertyName/index, value )

1

大家都知道vue是雙向綁定響應式更新視圖的，這個自動更新視圖主要是針對在data里面定義的屬性或者對象的鍵，比如有個data:{ test : 'test'};這里修改 test的值就可以自動更新相關的視圖。但是，如果你后面添加一個新的屬性進去然后修改 是沒法自動更新的，這就涉及vue的雙向綁定原理啦。

vue 默認的是將data 屬性添加到偵察器（發布者——訂閱者模式）上觀察，如果有變化就響應視圖更新，后面新增的屬性和對象是沒有做添加到觀察器的這步操作的，所以需要手動添加，就需要用到Vue的set方法。

Vue.set(app.arr,1,'qq')

1

參數：

第一個參數想要修改的數組或者對象

{Object | Array} target

1

第二個參數想要修改的對象名稱或者對應的下標

{string | number} propertyName/index

1

第三個參數想要修改成功后的值

{any} value

1

返回值是第三個參數 value

示例如下：

let obj = this.dryingList[ind]; this.$set(obj, "nodianzanflag", true);

1

2

參考文檔

https://cn.vuejs.org/v2/api/#Vue-set

《Vue進階（九十七）：vue給對象動態添加屬性和值》

《Vue進階（九十八）：Vue.set()和this.$set()介紹》

Vue 數據結構

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。