微信小程序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
        })
    }
相关文章
|
小程序 JavaScript
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)
|
Android开发
【Android App】蓝牙的设备配对、音频传输、点对点通信的讲解及实战(附源码和演示 超详细)
【Android App】蓝牙的设备配对、音频传输、点对点通信的讲解及实战(附源码和演示 超详细)
3484 1
Echarts参数属性学习:formatter字符串&返回函数的实战案例
Echarts参数属性学习:formatter字符串&返回函数的实战案例
1162 0
|
IDE Ubuntu 开发工具
2025年vscode (visual studio code)国内高速下载加速镜像,极速秒下!
Visual Studio Code(简称VSCode)是一款由微软开发的轻量级IDE,支持多种操作系统,以其高效、跨平台和免费的特点受到广泛欢迎。针对国内用户下载速度慢的问题,终于有了国内镜像,访问 https://www.baihezi.com/vscode/download
9982 10
2025年vscode (visual studio code)国内高速下载加速镜像,极速秒下!
|
11月前
|
JSON 数据挖掘 API
抖音电商新篇章:douyin.item_video API接口的介绍
抖音视频列表API接口简介:随着短视频发展,抖音成为全球重要平台,其视频数据对开发者、创作者和分析师意义重大。该API支持按关键词、分类等方式获取视频列表,通过HTTP请求(如GET)返回JSON格式数据,包含视频ID、播放量、作者信息等,助力构建推荐系统、分析趋势及挖掘用户行为,实现高效合法的数据利用。
|
缓存 JavaScript 持续交付
“解锁Node.js新纪元:如何借助Docker打造快速、高效且一致性的现代应用部署体验”
【10月更文挑战第25天】本文介绍了如何使用Docker容器化Node.js应用,包括容器化的好处、创建Docker镜像的步骤、构建和运行镜像的方法、管理依赖、保持应用更新以及调试技巧。通过容器化,可以提高应用的可移植性和可扩展性,简化开发和部署流程。
358 2
|
Unix
bat批处理命令之Start的详细用法\批处理打开指定的应用程序\批处理最大化\最小化打开程序
bat批处理命令之Start的详细用法\批处理打开指定的应用程序\批处理最大化\最小化打开程序
3975 0
扩展uview表单组件标题文本支持两端对齐
扩展uview表单组件标题文本支持两端对齐
597 2
|
安全 Unix Linux
Unix是什么?
Unix是什么?
1392 2
|
Windows