微信小程序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 是什么作用?
1042 1
|
安全 JavaScript 前端开发
Javascript框架库漏洞验证
Javascript框架库漏洞验证
4219 0
Javascript框架库漏洞验证
|
安全 数据安全/隐私保护 芯片
微信读书电脑版,来了!
微信读书电脑版,来了!
|
6月前
|
存储 弹性计算 关系型数据库
阿里云服务器4核16G可选实例规格、收费标准、适用场景及活动价格
阿里云4核16G云服务器提供多样化实例规格,满足不同场景需求。收费模式灵活,支持按量付费和包年包月,其中包年包月性价比最高。目前4核16G配置选择经济型e实例的活动价格为2174.57元起,通用算力型u2i实例1576.80元起,通用型g9i实例3944.23元起。
|
7月前
|
Java 应用服务中间件 开发者
Spring Boot 4.0官宣: 弃用 Undertow:Tomcat笑麻了
Spring Boot 4.0.0 M2 正式移除 Undertow 内嵌支持,主因是其未适配 Servlet 6.1 规范,而 Spring Boot 4 强制依赖该规范。本文解析技术动因、迁移影响及平滑过渡方案(推荐切回 Tomcat 或改用 Jetty),助力开发者顺利升级。(239字)
1490 1
Spring Boot 4.0官宣: 弃用 Undertow:Tomcat笑麻了
|
10月前
|
Linux 网络安全 开发工具
liunx环境手动安装.net8的教程
本教程适用于 Linux 环境,核心为手动安装.NET 8。步骤包括下载对应 Linux 架构的.NET 8 安装包,解压至指定目录,配置环境变量以确保系统识别,最后通过命令验证安装是否成功。整个过程无需依赖自动安装工具,操作简洁,可满足用户在 Linux 系统中手动部署.NET 8 的需求。
1731 3
|
Web App开发 人工智能 自然语言处理
快速搞定Dify+Chrome MCP:打造能操作网页的AI助手
用Dify+Chrome MCP,3分钟打造能“动手”操作网页的AI助手!无需编程,通过自然语言指令实现自动填表、数据抓取、网页点击等自动化任务。本地部署简单,支持搜索、登录、监控等场景,让AI成为你的7×24小时数字员工,高效处理重复性网页工作。
|
JavaScript API
VUE——监听浏览器关闭及标签页关闭事件
VUE——监听浏览器关闭及标签页关闭事件
1058 0
|
安全 Java 数据库连接
Java使用MyBatis-Plus的OR
通过MyBatis-Plus的条件构造器,Java开发者可以方便地进行复杂的查询条件组合,包括AND和OR条件的灵活使用。熟练掌握这些技巧,可以显著提升开发效率和代码可读性。
973 20
|
缓存 监控 测试技术
全网最全压测指南!教你如何测试和优化系统极限性能
大家好,我是小米。本文将介绍如何在实际项目中进行性能压测和优化,包括单台服务器和集群压测、使用JMeter、监控CPU和内存使用率、优化Tomcat和数据库配置等方面的内容,帮助你在高并发场景下提升系统性能。希望这些实战经验能助你一臂之力!
1738 3