小程序 setData 修改 data 中数组内不定对象的数据

普通变量的 setData()

在某些时候，我们的小程序中存在的不只是像下面这样的简单的变量:?变量值这种形式

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

这种形式的数据，在需要修改的时候，只需要如下形式修改就可以了

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

数组内部的 setData()

有时候，里面会有对象数组，需要修改数组内部的变量，如下面的?people?数组：

people: [
  {
    name: 24,products: [
      {name: 'iPhone',price: 4550},{name: 'AirPods Pro',128);">1999},]
  },{
    name: 'Tina',128);">26,68);">'Dell P2415Q',128);">1800},68);">'Macbook Pro',128);">8500},]
  }
]

像这种改变数组内部属性的值，需要不同于普通变量的?setData()，格式如下：
方括号里接收的是字符串

this.setData({
    [ 定位数据的字符串 ]: 数据
})

如: 修改 Kyle 的?age

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

上面这是修改数组中固定位置元素的数据，比如现在已经知道需要修改的数据下标变量为?index，修改不定下标的数据又该怎么写呢？

因为?[]?方括号中接收的是字符串，所以我们只需要放入对应的字符串即可，可以是 单引号拼接的字符串，也可以是 ES6 反引号形式的字符串，说白了只要是字符串就可以。
对比两种形式的写法就能明白什么意思了，写法如下：

普通字符串拼接：

let index = 1;
this.setData({
  ['people[' + index + '].age']: ES6 形式字符串：

修改数组中数组的值
这个无非就是再加一层而已，如：修改第二个人的第二个产品的价格，每次点击加 2
定义一个方法?changeAirPodsPrice?绑定中页面中的按钮上，代码如下：
changeAirPodsPrice: function() {
    let index = 1;  // people 下标，也就是第二个人
    let productIndex = 1 // 产品 下标，也就是第二个产品
    this.setData({
      [${index}].products[${productIndex}].price`]: this.data.people[index].products[productIndex].price + 2
    })
},
效果如图：

                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!