プログラムsetDataは、dataの配列内の不定物体のデータを修正します.

プログラムsetDataは、dataの配列内の不定物体のデータを修正します.
一般変数のsetData()
ある時、私達の小さいプログラムの中に存在するのは以下のような簡単な だけではありません.

data: {
    name: 'Kyle',
    age: 28,
    mail: '[email protected]'
}

このような形式のデータは、修正が必要な場合は、次のような形で修正すればいいです.

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

配列内部のset Data()
場合によっては、中にはオブジェクト配列があり、下の 配列のような配列内の変数を変更する必要があります.

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},
    ]
  }
]

このように配列内部の属性の値を変更するには、通常の変数とは異なるpeopleが必要です.フォーマットは以下の通りです.

this.setData({
    [          ]:   
})

例えば、Kyleを修正するsetData()

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

上のこれは配列中の固定位置要素を修正するデータです.例えば、修正すべきデータの下付き変数がageであることが分かりました.下付きデータを修正したらどう書きますか?indexの括弧の中で受信したのは文字列ですので、対応する文字列だけを入れてもいいです.シングル引用符の文字列でもいいです.ES 6のアンチ引用符形式の文字列でもいいです.つまり文字列であれば大丈夫です.二つの形式の書き方を比べるとどんな意味が分かりますか?
通常の文字列スティッチング:

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

ES 6形式文字列:

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

配列内の配列の値を変更します.
これは二番目の製品の価格を修正して、毎回クリックして2を追加します.
一つの方法[]を定義して、ページ内のボタンを紐付けします.コードは以下の通りです.

changeAirPodsPrice: function() {
    let index = 1;  // people   ，       
    let productIndex = 1 //      ，        
    this.setData({
      [`people[${index}].products[${productIndex}].price`]: this.data.people[index].products[productIndex].price + 2
    })
},

効果は図の通りです