微信小程序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
        })
    }
相关文章
|
人工智能 供应链 监控
【AI 现况分析】AI 在机械制造领域的应用分析
【1月更文挑战第27天】【AI 现况分析】AI 在机械制造领域的应用分析
|
小程序 开发者
uni-app语音转文字功能demo(同声传译)
uni-app语音转文字功能demo(同声传译)
|
7月前
|
JSON 数据挖掘 API
抖音电商新篇章:douyin.item_video API接口的介绍
抖音视频列表API接口简介:随着短视频发展,抖音成为全球重要平台,其视频数据对开发者、创作者和分析师意义重大。该API支持按关键词、分类等方式获取视频列表,通过HTTP请求(如GET)返回JSON格式数据,包含视频ID、播放量、作者信息等,助力构建推荐系统、分析趋势及挖掘用户行为,实现高效合法的数据利用。
|
JavaScript
cnpm 的安装与使用
本文介绍了npm和cnpm的概念、安装nodejs的步骤,以及cnpm的安装和使用方法,提供了通过配置npm使用中国镜像源来加速包下载的替代方案,并说明了如何恢复npm默认仓库地址。
cnpm 的安装与使用
|
前端开发 JavaScript
如何利用 CSS3 动画实现元素的淡入淡出效果?
在上述代码中,定义了一个名为 `fade-in` 的CSS类,其初始透明度为0,并设置了淡入的过渡效果。当通过JavaScript为元素添加 `active` 类时,元素的透明度变为1,实现淡入效果;当再次点击按钮移除 `active` 类时,元素又会逐渐淡出。通过这种方式,可以根据用户的操作灵活地控制元素的淡入淡出效果。
1584 60
|
IDE Ubuntu 开发工具
2025年vscode (visual studio code)国内高速下载加速镜像,极速秒下!
Visual Studio Code(简称VSCode)是一款由微软开发的轻量级IDE,支持多种操作系统,以其高效、跨平台和免费的特点受到广泛欢迎。针对国内用户下载速度慢的问题,终于有了国内镜像,访问 https://www.baihezi.com/vscode/download
6771 10
2025年vscode (visual studio code)国内高速下载加速镜像,极速秒下!
|
JavaScript 前端开发 数据安全/隐私保护
Web开发者必看:手把手教你如何轻松播放m3u8流地址,解锁视频播放新技能,让你的项目更上一层楼!
【10月更文挑战第23天】随着互联网技术的发展,m3u8格式因良好的兼容性和高压缩率被广泛用于网络流媒体传输。本文介绍如何在Web端播放m3u8流地址,包括引入视频播放器(如Video.js)、创建播放器容器、初始化播放器及播放m3u8流的具体步骤。此外,还涉及处理加密m3u8流的示例。
2676 1
|
安全 Unix Linux
Unix是什么?
Unix是什么?
1169 2
|
Unix
bat批处理命令之Start的详细用法\批处理打开指定的应用程序\批处理最大化\最小化打开程序
bat批处理命令之Start的详细用法\批处理打开指定的应用程序\批处理最大化\最小化打开程序
3505 0