微信小程序setData中键名key中使用变量

简介: setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步).setData中可以传入的参数Object 以 key: value 的形式表示,将 this.data 中的 key 对应的值改变成 value。其中 key 可以以数据路径的形式给出,支持改变数组中的某一项或对象的某个属性,有时我们需要在使用变量表示key,这时应该如何操作呢.

setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步).setData中可以传入的参数Object 以 key: value 的形式表示,将 this.data 中的 key 对应的值改变成 value。其中 key 可以以数据路径的形式给出,支持改变数组中的某一项或对象的某个属性,有时我们需要在使用变量表示key,这时应该如何操作呢.

问题描述:

例一:

  binddata: function (e) {
   
        var idNum = e.target.id;
        this.setData({
    idNum: e.detail.value });
    }

idNum传过去,直接是data中多了一个'idNum'的数据,不是动态的id数值.

例二:

   changeIntro:function (event) {
   
        let videoArrayIndex = event.target.dataset.index;
        this.setData({
   
            'videoArray[videoArrayIndex].introState' : true
        })
    }

无法改变introState的值,因为videoArrayIndex没有被解析为序列号.

解决办法:

一. 用一个空对象暂存

var data = {
   }
data[key] = value // key 可以是任何字符串
this.setData(data)

使用一个中间对象暂存解决上述例二

changeIntro:function (event) {
   
        let videoArrayIndex = event.target.dataset.index;
        let dataIntro = {
   };
        let keyIntro = 'videoArray['+videoArrayIndex+'].introState';
        dataIntro[keyIntro] = true; // key 可以是任何字符串
        this.setData(dataIntro)
    }

二. 使用es6新特性

ES6 允许声明在对象字面量时使用简写语法,来初始化属性变量和函数的定义方法,并且允许在对象属性中进行计算操作:

 this.setData({
   
            [key]: value
        })

使用es6新特性解决上述例二

  changeIntro:function (event) {
   
        let videoArrayIndex = event.target.dataset.index;
        this.setData({
   
            ['videoArray['+videoArrayIndex+'].introState'] : true
        })
    }
相关文章
|
监控 Docker 容器
Docker 启动命令里 --cgroupns host 是什么作用?
【8月更文挑战第19天】Docker 启动命令里 --cgroupns host 是什么作用?
1066 1
|
移动开发 Java HTML5
Springboot web静态资源配置
Springboot web静态资源配置
1599 0
|
JavaScript API
VUE——监听浏览器关闭及标签页关闭事件
VUE——监听浏览器关闭及标签页关闭事件
1079 0
|
JavaScript API 图形学
一个案例带你从零入门Three.js,深度好文!
【8月更文挑战第1天】本教程无需任何Threejs知识!本教程以入门为主,带你快速了解Three.js开发
884 2
一个案例带你从零入门Three.js,深度好文!
|
JSON 小程序 前端开发
小程序中使用npm安装vant组件实现按需引入减少代码包大小,避免触发用户隐私协议
微信小程序按需引入 vant 组件,自动清除项目中未使用的 vant 组件,减少代码包大小,避免因未使用到的 vant 组件触发隐私协议提交审核时被拒
小程序中使用npm安装vant组件实现按需引入减少代码包大小,避免触发用户隐私协议
|
编解码 开发者 UED
Qt布局实战:实现高效、美观的GUI应用程序
Qt布局实战:实现高效、美观的GUI应用程序
2521 2
|
存储 算法 搜索推荐
带用接和替换算法swap讲解
带用接和替换算法swap讲解
510 1
|
弹性计算 大数据 测试技术
2024年阿里云便宜云服务器价格出炉:99元、61元、199元、26元多配置报价
2024年阿里云便宜云服务器价格出炉:99元、61元、199元、26元多配置报价,2024年阿里云服务器租用价格表更新,云服务器ECS经济型e实例2核2G、3M固定带宽99元一年、ECS u1实例2核4G、5M固定带宽、80G ESSD Entry盘优惠价格199元一年,轻量应用服务器2核2G3M带宽轻量服务器一年61元、2核4G4M带宽轻量服务器一年165元12个月、2核4G服务器30元3个月,幻兽帕鲁4核16G和8核32G服务器配置,云服务器ECS可以选择经济型e实例、通用算力u1实例、ECS计算型c7、通用型g7、c8i、g8i等企业级实例规格。阿里云百科分享阿里云服务器租用费用最新报价
2444 3
WebService - MEP(信息交换模式)
WebService - MEP(信息交换模式)
541 0
|
存储 NoSQL 搜索推荐
Neo4J 1(三)|学习笔记
快速学习 Neo4J 1(三)
380 0
Neo4J 1(三)|学习笔记