小程序 setData 修改 data 中數(shù)組內(nèi)不定對象的數(shù)據(jù)

普通變量的 setData()

在某些時候，我們的小程序中存在的不只是像下面這樣的簡單的變量: 變量值這種形式

data: {
    name: 'Kyle',
    age: 28,
    mail: 'kylebing@163.com'
}

這種形式的數(shù)據(jù)，在需要修改的時候，只需要如下形式修改就可以了

 this.setData({
    name: 'Tina'
 })

數(shù)組內(nèi)部的 setData()

有時候，里面會有對象數(shù)組，需要修改數(shù)組內(nèi)部的變量，如下面的 people 數(shù)組：

people: [
  {
    name: 'Kyle',
    age: 24,
    products: [
      {name: 'iPhone', price: 4550},
      {name: 'AirPods Pro', price: 1999},
    ]
  },
  {
    name: 'Tina',
    age: 26,
    products: [
      {name: 'Dell P2415Q', price: 1800},
      {name: 'Macbook Pro', price: 8500},
    ]
  }
]

像這種改變數(shù)組內(nèi)部屬性的值，需要不同于普通變量的 setData()，格式如下：
方括號里接收的是字符串

this.setData({
    [ 定位數(shù)據(jù)的字符串 ]: 數(shù)據(jù)
})

如: 修改 Kyle 的 age

this.setData({
    ['people[0].age']: 25
})

上面這是修改數(shù)組中固定位置元素的數(shù)據(jù)，比如現(xiàn)在已經(jīng)知道需要修改的數(shù)據(jù)下標變量為 index，修改不定下標的數(shù)據(jù)又該怎么寫呢？

因為 [] 方括號中接收的是字符串，所以我們只需要放入對應的字符串即可，可以是 單引號拼接的字符串，也可以是 ES6 反引號形式的字符串，說白了只要是字符串就可以。
對比兩種形式的寫法就能明白什么意思了，寫法如下：

普通字符串拼接：

let index = 1;
this.setData({
  ['people[' + index + '].age']: 25
})

ES6 形式字符串：

let index = 1;
this.setData({
  [`people[${index}].age`]: 25
})

修改數(shù)組中數(shù)組的值

這個無非就是再加一層而已，如：修改第二個人的第二個產(chǎn)品的價格，每次點擊加 2

定義一個方法 changeAirPodsPrice 綁定中頁面中的按鈕上，代碼如下：

changeAirPodsPrice: function() {
    let index = 1;  // people 下標，也就是第二個人
    let productIndex = 1 // 產(chǎn)品 下標，也就是第二個產(chǎn)品
    this.setData({
      [`people[${index}].products[${productIndex}].price`]: this.data.people[index].products[productIndex].price + 2
    })
},

效果如圖：

作者： KyleBing
http://www.wxapp-union.com/portal.php?mod=view&aid=5646