微信小程序—动态改变循环列表中的某一个元素

20190118162607700.gif

  <!--mission.wxml-->
 <view class="container">
     <view class="mission-item" wx:for="{{getPost}}" wx:key='id'>
      <!--领取任务样式-->
      <view class='mission-icon' wx:if = "{{item.status == 0}}">
         <view class='missionfont' data-index = '{{index}}' 
         catchtap="acceptMission">
            领取任务
         </view>
      </view>
      <!--取消任务样式-->
      <view class='accept-mission-icon' wx:if = "{{item.status == 1}}">
         <view class='acceptfont' data-index = '{{index}}'
          catchtap="cancelMission">
             正在行动
         </view>
      </view>
     </view>
 </vew>

Page({
 data:{
  Mission:[]
 }
 //领取任务
 acceptMission: function (e) {
    // 获取当前点击下标    
    var Index = e.currentTarget.dataset.index;
    console.log(Index);
    // data中获取列表   
    var missionArr = this.data.Mission;
    for (let i in missionArr) {
      //遍历列表数据      
      if (i == Index) {
        //根据下标找到目标,改变状态  
        if (missionArr[i].status == 0) {
          missionArr[i].status = parseInt(missionArr[i].status) + 1
        }
      }
    }
    //数组重新赋值
    this.setData({
      Mission: missionArr
    })
    wx.showToast({
      title: '领取成功',
    })
  },
 //取消任务
 cancelMission: function (e) {
    // 获取当前点击下标    
    var Index = e.currentTarget.dataset.index;
    // data中获取列表   
    var missionArr = this.data.Mission;
    for (let i in missionArr) {
      //遍历列表数据      
      if (i == Index) {
        //根据下标找到目标,改变状态  
        if (missionArr[i].status == 1) {
          missionArr[i].status = parseInt(missionArr[i].status) - 1
        }
      }
    }
    //数组重新赋值
    this.setData({
      Mission: missionArr
    })
    wx.showToast({
      title: '取消成功',
    })
  },
})