微信小程序:动态修改数组的某一个元素

news/2024/7/24 11:28:44

简介

在微信小程序项目中,需要点击页面遍历出的某一个元素,更换其图标。经过踩坑,发现了关键点,与大家分享一下。

具体实现

// 定义的数组
data: {
  arrayData: [
    { keyID: "1", name: "大娃", sex: 1, birth: "2019-10-10", info: { like: "苹果", goodAt: "LOL" } },
    { keyID: "2", name: "二娃", sex: 0, birth: "2019-10-10", info: { like: "香蕉", goodAt: "DNF" } },
    { keyID: "3", name: "三娃", sex: 1, birth: "2019-10-10", info: { like: "樱桃", goodAt: "CF" } }
  ]
}

一般情况下,我们会这样写:

// 需要在遍历出的对象处添加 bindtap 事件,并 data-index 绑定 index ( wx:for 自带就有的 index,不用特别声明)
clickedFun:function(e) {
  let that = this;
  let indexs = e.currentTarget.dataset.index;
  that.setData({
    arrayData[indexs].info.goodAt: "跑步"
  });
}

发现这样并不能达到想要的效果!!!
小程序中正确的写法如下:

// 需要在遍历出的对象处添加 bindtap 事件,并 data-index 绑定 index ( wx:for 自带就有的 index,不用特别声明)
clickedFun:function(e) {
  let that = this;
  let indexs = e.currentTarget.dataset.index;
  that.setData({
    ["arrayData[" + indexs + "].info.goodAt: "跑步"]
  });
}

至于setData的具体规则,就请大家去查看小程序官方文档介绍了。

最后

觉得有用的朋友请用你的金手指点一下赞,或者评论留言一起探讨技术!


http://www.niftyadmin.cn/n/1867272.html

相关文章

VUE:实现星级评价,以VUE举例

简介 在很多项目中&#xff0c;需要用到对商品、订单、服务等的评价功能&#xff0c;其中使用星级评价是一种快捷表现满意度的体现。接下来以VUE项目环境列举一个实例。具体样式的话&#xff0c;需要自己根据项目实际情况进行修改。 具体实现 // HTML <div class"fl…

【可爱少女】InsCode Stable Diffusion 美图活动一期

在线运行地址 https://inscode.csdn.net/inscode/Stable-Diffusion 模型相关版本和参数配置 Steps&#xff08;采样迭代步数&#xff09;: 20 Sampler&#xff08;采样方法&#xff09;: Euler a 采样迭代步数(Steps)Sampling steps&#xff1a;20 生成批次&#xff1a;1 批次…

VUE:实现模块分类展示数据列表

简介 项目中&#xff0c;会有一个模块展示多个类别的数据&#xff0c;点某一个标题只展示相关的内容。 具体实现 <template><div><div class"classifyToolBox"><div class"flexRowStart classifyToolBar"><div v-for"(…

VUE:iframe访问并展示外部网址或者视频

简介 在H5网址、APP等项目中&#xff0c;会有访问外部链接、播放网上视频的需求。 具体实现 上一个页面&#xff0c;传入三个 参数&#xff0c;分别是type&#xff08;0 图文&#xff0c;1 视频&#xff0c;注意最好是用字符窜的格式&#xff09;、url&#xff08;图文或视频…

微信小程序:解决wx.createInnerAudioContext()播放语音的坑

简介 微信小程序中用wx.createInnerAudioContext()&#xff0c;发现怎么暂停和取消的效果都差强人意&#xff0c;原因是将此方法写在了我的播放语音函数里。然后就参考了网上的解决方案。 具体实现 将此方法声明在onLoad中&#xff0c;&#xff08;如果声明在page外部&#…

VUE:返回页面顶部

简介 VUE项目中&#xff0c;需要做一个浮窗&#xff0c;点击浮窗返回页面顶部。 具体实现 data () { return { // 下滑到一定位置才显示按钮控件 visible: false, scrollTop: 0 } }, // 获取屏幕高度 mounted () { window.addEventListener(scroll, this.handleScroll) }, //…

VUE:搜索框动态提示(使用了elementUi的提示组件)

简介 VUE项目中&#xff0c;需要实现用户输入内容&#xff0c;然后边输入边动态查询是否要模糊匹配的值&#xff0c;并实时展示给用户。 注意&#xff1a;此处是引入了elementUI框架的。 具体实现 // HTML: <el-autocomplete v-model"hospitalName.hospitalName&qu…

JS:浏览器中获取用户手机设备权限,如语音、相机等

简介 H5网页项目中有需要拍照、录音、视频等会需要获取手机设备权限。 具体实现 created() {if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {this.getUserMedia({ video: true, audio:…