解決vuejs 建立資料後設定物件的屬性實現不了雙向繫結問題

樑鳳波發表於2018-04-19
VueJS物件

丟擲踩坑：解決vuejs 建立物件之後新增新的屬性實現不了雙向繫結問題

當業務場景，需要在請求介面資料新增自定義的屬性

let foodList = [
  {title: `回鍋肉`, price: 99.0},
  {title: `油燜大蝦`, price: 199.0}
];

我們要做數量增加時候，後自定義新增數量屬性quantity：


// 新增自定義屬性數量quantity
foodList.forEach(item => {
  item.quantity = 0;
});

/**
 [
 { title: `回鍋肉`, price: 99, quantity: 0 },
 { title: `油燜大蝦`, price: 199, quantity: 0 }
 ]

 */

我們需要對數量增加的時候，quantity是實現不了雙向繫結的，比如：

// 特殊菜數量新增
quantityAction(type, item) {
    // 加法
    if (type === `add`) {
      item.quantity++
    } else {
      // 減法
      if (item.quantity > 0) {
        item.quantity--
      }
    }
}
// 幾時quantity是在增減，實際頁面是達不到雙向繫結的

解決方法：

這時候需要用$set方法，設定物件的屬性。

如果物件是響應式的，確保屬性被建立後也是響應式的，同時觸發檢視更新。這個方法主要用於避開 Vue 不能檢測屬性被新增的限制。

vm.$set( target, key, value )
- 引數：
  - {Object | Array} target
  - {string | number} key
  - {any} value
  - 返回值：設定的值。

用法：

foodList.forEach(item => {
  this.$set(item, `quantity`, 0)
});

這樣後面建立的屬性就可以達到雙向繫結了！

相關文章