微信小程序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 在机械制造领域的应用分析
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
解决 Vant中 输入框(Field)组件获取不到输入值
解决 Vant中 输入框(Field)组件获取不到输入值
2310 0
解决 Vant中 输入框(Field)组件获取不到输入值
|
6月前
|
JSON 数据挖掘 API
抖音电商新篇章:douyin.item_video API接口的介绍
抖音视频列表API接口简介:随着短视频发展,抖音成为全球重要平台,其视频数据对开发者、创作者和分析师意义重大。该API支持按关键词、分类等方式获取视频列表,通过HTTP请求(如GET)返回JSON格式数据,包含视频ID、播放量、作者信息等,助力构建推荐系统、分析趋势及挖掘用户行为,实现高效合法的数据利用。
|
JavaScript
cnpm 的安装与使用
本文介绍了npm和cnpm的概念、安装nodejs的步骤,以及cnpm的安装和使用方法,提供了通过配置npm使用中国镜像源来加速包下载的替代方案,并说明了如何恢复npm默认仓库地址。
cnpm 的安装与使用
|
11月前
|
IDE Ubuntu 开发工具
2025年vscode (visual studio code)国内高速下载加速镜像,极速秒下!
Visual Studio Code(简称VSCode)是一款由微软开发的轻量级IDE,支持多种操作系统,以其高效、跨平台和免费的特点受到广泛欢迎。针对国内用户下载速度慢的问题,终于有了国内镜像,访问 https://www.baihezi.com/vscode/download
5707 10
2025年vscode (visual studio code)国内高速下载加速镜像,极速秒下!
|
安全 Unix Linux
Unix是什么?
Unix是什么?
1055 2
|
存储 负载均衡 并行计算
实现优雅并行编程:确保正确性与提升性能的关键要素
在程序开发中,并行编程一种利用多个处理器或计算资源同时执行多个任务的编程方式,它能够提高计算效率和性能,是提高计算效率和性能的关键手段,但它也带来了一系列复杂的问题,涉及到任务分解、数据同步、资源分配等诸多复杂问题,稍有不慎就可能导致性能瓶颈、死锁甚至数据不一致等状况。编写优雅的并行程序需要在保证程序正确性的前提下,实现高效的并行计算。那么本文就来探讨一下如何在保证程序正确性的前提下,实现优雅的并行程序,以提升计算效率和性能,包括任务分解、数据同步和资源分配等方面的关键要素,希望能够为读者提供一些有用的指导和启示。
323 2
实现优雅并行编程:确保正确性与提升性能的关键要素
|
JavaScript 前端开发
JS - 正则替换富文本内容的所有图片地址,并提取src、alt、style等属性
这篇文章提供了使用JavaScript正则表达式来替换富文本中所有图片地址,并提取`src`、`alt`、`style`等属性的示例代码和方法。
814 1