当前位置:   article > 正文

微信小程序中使用wx:for,循环中绑定点击事件,对数组进行渲染_微信小程序循环渲染设置点击事件

微信小程序循环渲染设置点击事件

微信小程序实际开发中,在for循环中,需要获取用户对那组数据进行了修改,使用了vue太久,微信小程序有点忘记了,查阅资料后也是很快熟悉起来,但是赋值过程中遇到了一些小问题,解决了,特此记录一下。
1、在for循环中使用switch开关,用户点击对应开关,需要将对应数组中checked改变状态

<switch style="zoom:.8;margin:30rpx 0 0 20rpx;"  type="switch" checked="{{item.checked}}" bindchange="listenerSwitch" data-index='{{index}}' />
  • 1

使用‘data-’ 可以绑定对应用户点击的for循环中数组的下标,此处用data-index=’{{index}}'进行绑定。

listenerSwitch(event){
    var b = event.currentTarget.dataset.index
    this.setData({
      [`list_zidonghua[${b}].checked`]:!this.data.list_zidonghua[b].checked
    })
    console.log(this.data.list_zidonghua);
  },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

此处event.currentTarget.dataset.index便是获取到wxml中所处理的数组下标,一开始直接赋值

this.setData({
'list_zidonghua[${b}].checked':!this.data.list_zidonghua[b].checked
})
  • 1
  • 2
  • 3

会报下面的错误

 Error: Only digits (0-9) can be put inside [] in the path string
  • 1

查阅官方文档后修改为上述赋值,轻松解决。
官方文档:
在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/94213
推荐阅读
相关标签
  

闽ICP备14008679号