⼩程序修改data,页⾯数据实时更新需求:通过点击button修改dataList中checkResult的值并修改按钮状态
a.wxml:
1<view wx:for="{{dataList}}" wx:key='index' class='list-body'>
2  <view>
3    <view>编码:{{item.equipCode}}</view>
4    <view>设备:{{item.equipName}}</view>
5    <view>测项:{{item.checkItemName}}</view>
6  </view>
7  <!-- wx:if设置默认选中状态 -->
8  <view class='list-button' wx:if='{{item.checkResult=="正常"}}'>
9    <button bindtap='change' data-index='{{index}}' data-status='' class='add' style='color:#fff'>正常</button>
10    <button bindtap='change' data-index='{{index}}' data-status='异常'>异常</button>
11  </view>
12  <view class='list-button' wx:else>
13    <button bindtap='change' data-index='{{index}}' data-status='正常'>正常</button>
14    <button bindtap='change' data-index='{{index}}' data-status='异常' class='add' style='color:#fff'>异常</button>
15  </view>
16</view>
a.js
1Page({
2    data:{
3        dataList:[
4            {'equipCode':1001,'equipName':'打印机','checkItemName':'记录',checkResult:'正常'},
5            {'equipCode':1002,'equipName':'打印机','checkItemName':'记录',checkResult:'异常'},
6            {'equipCode':1003,'equipName':'打印机','checkItemName':'记录',checkResult:'正常'},
7            {'equipCode':1004,'equipName':'打印机','checkItemName':'记录',checkResult:'异常'},
8            {'equipCode':1005,'equipName':'打印机','checkItemName':'记录',checkResult:'正常'}
9        ]
10    },
11    change: function(e) {
12        var changeData = 'dataList['+e.target.dataset.index+'].checkResult';
13        if (e.target.dataset.status == '正常') {
8.0怎么更新14          this.setData({
15            [changeData]: '正常'//修改状态,前端页⾯数据也会改变
16          })
17        } else {
18          this.setData({
19            [changeData]: '异常'
20          })
21        }
22    },
23})
上⾯⽰例通过this.setData修改data中的值,实现数据与前端页⾯保持⼀直,相当于vue中的双向数据绑定。如果对数据⼀致性没有要求的话还可以使⽤this.data.Object进⾏修改和取值。