用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

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

Rolan 2019-11-6 00:31

小程序 setData 修改 data 中数组内不定对象的数据普通变量的 setData()在某些时候,我们的小程序中存在的不只是像下面这样的简单的变量:变量值这种形式data: { name: 'Kyle', age: 28, mail: 'kylebing@163.com' } ...

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

普通变量的 setData()

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

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

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

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

效果如图:

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: KyleBing 来自: segmentfault