1. 程式人生 > >解決vuejs 創建數據後設置對象的屬性實現不了雙向綁定問題

解決vuejs 創建數據後設置對象的屬性實現不了雙向綁定問題

asc PE quantity VM type 響應 rip 頁面 RR

拋出踩坑:vue創建後的數據,自定義設置對象的屬性,實現不了雙向綁定

當業務場景,需要在請求接口數據新增自定義的屬性

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)
});

這樣後面創建的屬性就可以達到雙向綁定了!

解決vuejs 創建數據後設置對象的屬性實現不了雙向綁定問題