解决列表渲染时,动态修改某一条数据的问题

今天在git上遇到一个问题如下:
就是假设:循环列出一组电影列表,然后要给电影增加点赞功能。这个点赞操作怎么实现呢?
类似:

<view bindtap='aa' data-id="a1">{{zan}}</view>
<view bindtap='aa' data-id="a2">{{zan}}</view>

点击点赞后,应该都是到同个aa方法,然后去修改zan的值去修改图标,显示点赞了。
遇到的问题:修改zan的值,会修改所有的列表。

谢谢了


因为小程序不支持dom操作,页面展示效果完全依赖数据驱动,所以在页面需要定义data

Page({
  data:{
     array: [
      {
        id:"a1",
        zan: '赞'
      }, 
      {
        id:"a2",
        zan: '赞'
      }
    ]
  },

然后循环操作数组

aa:function(e){
    var currId = e.currentTarget.dataset.id;
    var array = this.data.array;
    for(var i = 0;i<array.length;i++){
      if(array[i]['id']==currId){
        array[i]['zan'] = "已赞";
        this.setData({
          array:array
        });
        break;
      }
    }
  }

发布者

小五

前端开发爱好者,关注前端新技术。