微信小程序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 (十)
|
JSON 数据挖掘 API
抖音电商新篇章:douyin.item_video API接口的介绍
抖音视频列表API接口简介:随着短视频发展,抖音成为全球重要平台,其视频数据对开发者、创作者和分析师意义重大。该API支持按关键词、分类等方式获取视频列表,通过HTTP请求(如GET)返回JSON格式数据,包含视频ID、播放量、作者信息等,助力构建推荐系统、分析趋势及挖掘用户行为,实现高效合法的数据利用。
1015 1
|
JavaScript API
VUE——监听浏览器关闭及标签页关闭事件
VUE——监听浏览器关闭及标签页关闭事件
1003 0
|
Unix
bat批处理命令之Start的详细用法\批处理打开指定的应用程序\批处理最大化\最小化打开程序
bat批处理命令之Start的详细用法\批处理打开指定的应用程序\批处理最大化\最小化打开程序
4363 0
|
缓存 JavaScript 持续交付
“解锁Node.js新纪元:如何借助Docker打造快速、高效且一致性的现代应用部署体验”
【10月更文挑战第25天】本文介绍了如何使用Docker容器化Node.js应用,包括容器化的好处、创建Docker镜像的步骤、构建和运行镜像的方法、管理依赖、保持应用更新以及调试技巧。通过容器化,可以提高应用的可移植性和可扩展性,简化开发和部署流程。
453 2
扩展uview表单组件标题文本支持两端对齐
扩展uview表单组件标题文本支持两端对齐
694 2
|
Windows
|
资源调度 前端开发 JavaScript
React中classnames库使用
【10月更文挑战第7天】
|
小程序
微信小程序无法触发onReachBottom的解决方案
这篇文章提供了解决微信小程序中`onReachBottom`事件无法触发的问题的方案。问题的原因可能是`onReachBottom`方法重复,解决方案是删除系统自动生成的该方法。
|
Unix API 开发者
微信公众号:如何根据关键词取文章列表 API 返回值说明?
微信公众号根据关键词获取文章列表的API通常指的是微信公众平台的“素材管理”接口中的“获取素材列表”功能。通过这个接口,开发者可以获取公众号已上传的文章素材列表,包括图文消息、视频、音频等。以下是API返回值的一般说明