小程序订房、点餐时for循环加载数据并选择数量互不影响的功能实现

这个问题并非难点，只是我因为习惯性思维，通过变量去实现时思路受限，并在此困惑良久，所以做个记录。

如图，类型包括后面的数量选择，是来自数据库的 for 循环加载出来的，我们要实现的是点击任意一个数量加减，而不影响其他。

wxml：

<!--page/test/test.wxml-->
<view class='dateM'>
  <view class='item rowBox' wx:for="{{ProductList}}">
    <view class='dateML rowCon'>
      <view class=''>
        <text class='fs17 pr10'>{{item.ProductName}}</text>
        <text class='fs12 c38bafe'>{{item.isCancel}}</text>
      </view>
      <view class='mt5 cff4040 fs13'>
        <text class='pr10'>同行价 ￥4/4</text>
        <text>团队价 ￥4/5 </text>
      </view>
    </view>
    <view class='dateMR rowBox'>
      <view class="reduce" data-tag="{{item.TagId}}" data-id='{{index}}' catchtap="reduceNum">
        <text class="iconfont icon-jian"></text>
      </view>
      <view class="num">
        <block wx:if="{{item.count}}">
          <input data-id="{{index}}" type="number" value="{{item.count}}" disabled/>
        </block>
        <block wx:else>
          <input data-id="{{index}}" type="number" value="0" disabled/>
        </block>
      </view>
      <view class="add active" data-tag="{{item.TagId}}" data-id='{{index}}' catchtap="addNum">
        <text class="iconfont icon-jia"></text>
      </view>
    </view>
  </view>
</view>

js:

// page/test/test.js
Page({
  data: {
    "ProductList": [          //产品集合
      {
        "ProductName": "标准间", //产品名称
        "isCancel": "可以取消",  //是否可取消[0可以，1不可以]
        "isAutoConfirm": "人工确认", //是否自动确认[0人工确认，1自动确认]
        "DayStatus": 0,       //当日房态[0正常，1关闭]
        "DayJsPrice": "电询", //当日结算价
        "DayGpPrice": "电询", //当日团队价
        "DayNum": 0,         //当日房间数量
        'TagId': 85,
        'ProductId': 101
      },
      {
        "ProductName": "大床房",
        "isCancel": "可以取消",
        "isAutoConfirm": "人工确认",
        "DayStatus": 0,
        "DayJsPrice": "电询",
        "DayGpPrice": "电询",
        "DayNum": 0,
        'TagId': 86,
        'ProductId': 103
      },
      {
        "ProductName": "双人间",
        "isCancel": "可以取消",
        "isAutoConfirm": "人工确认",
        "DayStatus": 0,
        "DayJsPrice": "电询",
        "DayGpPrice": "电询",
        "DayNum": 0,
        'TagId': 87,
        'ProductId': 104
      }
    ]
  },
  addNum: function (e) {
    var tag = e.currentTarget.dataset.tag,
      id = e.currentTarget.dataset.id;
    if (!this.data.ProductList[id].count){
      var countVal = 0;
      countVal++;
      var count = 'ProductList['+id+'].count';
      this.setData({
        [count]: countVal
      })
      console.log(this.data.ProductList[id].count)
    } else {
      var countVal = this.data.ProductList[id].count;
      countVal++;
      var count = 'ProductList[' + id + '].count';
      this.setData({
        [count]: countVal
      })
    }
  }
})

wxss:

/* page/test/test.wxss */
/* 弹性盒子属性 --横向*/
.rowBox{ display:-webkit-box; display:-webkit-flex; -webkit-flex-flow:row;}
.rowCon{ -webkit-box-flex: 1;-webkit-flex: 1;flex: 1; }
/* 弹性盒子属性 --竖向*/
.verBox{ display:-webkit-flex; -webkit-box-orient: vertical;-webkit-flex-flow: column;flex-flow: column;}
.fs08 {font-size:16rpx;}
.fs10 {font-size:20rpx;}
.fs11 {font-size:22rpx;}
.fs12 {font-size:24rpx;}
.fs13 {font-size:26rpx;}
.fs14 {font-size:28rpx;}
.fs15 {font-size:30rpx;}
.fs16 {font-size:32rpx;}
.fs17 {font-size:34rpx;}
.fs18 {font-size:36rpx;}
.fs19 {font-size:38rpx;}
.fs20 {font-size:40rpx;}
.fs21 {font-size:42rpx;}
.fs22 {font-size:44rpx;}
.fs23 {font-size:46rpx;}
.fs24 {font-size:48rpx;}
.fs25 {font-size:50rpx;}
.fs26 {font-size:52rpx;}
.fs28 {font-size:56rpx;}
.fs30 {font-size:60rpx;}
.ml5 {margin-left:5px;}
.pr10 {padding-right:10px;}



.dateM{
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
}
.dateM .item{
  padding: 16rpx 0;
}
 .dateM .dateMR .reduce,
 .dateM .dateMR .add{
  position: relative;
  top: 20rpx;
  text-align: center;
  width: 56rpx;
  height: 56rpx;
  line-height: 60rpx;
  color: #ddd;
  font-size: 20rpx;
}
 .dateM .dateMR .reduce.active,
 .dateM .dateMR .add.active{
  color: #fec93d;
}
 .dateM .dateMR .reduce text,
 .dateM .dateMR .add text{
  font-size: 40rpx;
  display: inline-block;
}
 .dateM .dateMR .num{
  position: relative;
  top: 22rpx;
  text-align: center;
  width: 50rpx;
  height: 56rpx;
  line-height: 56rpx;
}
 .dateM .dateMR .num input{
  text-align: center;
  width: 50rpx;
  height: 56rpx;
  line-height: 56rpx;
  font-size: 28rpx;
}