小程序 setData 修改 data 中數組內不定對象的數據
普通變量的 setData()
在某些時候,我們的小程序中存在的不只是像下面這樣的簡單的變量
: 變量值
這種形式
data: {
name: 'Kyle',
age: 28,
mail: '[email protected]'
}
這種形式的數據,在需要修改的時候,只需要如下形式修改就可以了
this.setData({
name: 'Tina'
})
數組內部的 setData()
有時候,裏面會有對象數組,需要修改數組內部的變量,如下面的 people
數組:
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},
]
}
]
像這種改變數組內部屬性的值,需要不同於普通變量的 setData()
,格式如下:
方括號裏接收的是字符串
this.setData({
[ 定位數據的字符串 ]: 數據
})
如: 修改 Kyle 的 age
this.setData({
['people[0].age']: 25
})
上面這是修改數組中固定位置元素的數據,比如現在已經知道需要修改的數據下標變量爲 index
,修改不定下標的數據又該怎麼寫呢?
因爲 []
方括號中接收的是字符串,所以我們只需要放入對應的字符串即可,可以是 單引號拼接的字符串,也可以是 ES6 反引號形式的字符串,說白了只要是字符串就可以。
對比兩種形式的寫法就能明白什麼意思了,寫法如下:
普通字符串拼接:
let index = 1;
this.setData({
['people[' + index + '].age']: 25
})
ES6 形式字符串:
let index = 1;
this.setData({
[`people[${index}].age`]: 25
})
修改數組中數組的值
這個無非就是再加一層而已,如:修改第二個人的第二個產品的價格,每次點擊加 2
定義一個方法 changeAirPodsPrice
綁定中頁面中的按鈕上,代碼如下:
changeAirPodsPrice: function() {
let index = 1; // people 下標,也就是第二個人
let productIndex = 1 // 產品 下標,也就是第二個產品
this.setData({
[`people[${index}].products[${productIndex}].price`]: this.data.people[index].products[productIndex].price + 2
})
},
效果如圖: