Code example of WeChat applet modifying data to update page data in real time

The content of this article is about the code example of WeChat applet modifying data to update page data in real time. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Requirement: Modify the value of checkResult in dataList and modify the button state by clicking the button.

##a.wxml:

<view>
  <view>
    <view>编码：{{item.equipCode}}</view>
    <view>设备：{{item.equipName}}</view>
    <view>测项：{{item.checkItemName}}</view>
  </view>
  <!-- wx:if设置默认选中状态 -->
  <view>
    <button>正常</button>
    <button>异常</button>
  </view>
  <view>
    <button>正常</button>
    <button>异常</button>
  </view>
</view>

a.js

Page({
    data:{
        dataList:[
            {'equipCode':1001,'equipName':'打印机','checkItemName':'记录',checkResult:'正常'},
            {'equipCode':1002,'equipName':'打印机','checkItemName':'记录',checkResult:'异常'},
            {'equipCode':1003,'equipName':'打印机','checkItemName':'记录',checkResult:'正常'},
            {'equipCode':1004,'equipName':'打印机','checkItemName':'记录',checkResult:'异常'},
            {'equipCode':1005,'equipName':'打印机','checkItemName':'记录',checkResult:'正常'}
        ]
    },
    change: function(e) {
        var changeData = 'dataList['+e.target.dataset.index+'].checkResult';
        if (e.target.dataset.status == '正常') {
          this.setData({
            [changeData]: '正常'//修改状态，前端页面数据也会改变
          })
        } else {
          this.setData({
            [changeData]: '异常'
          })
        }
    },
})

The above example uses this.setData to modify the value in data to keep the data consistent with the front-end page, which is equivalent to two-way data binding in vue.

If there is no requirement for data consistency, you can also use this.data.Object to modify and obtain values.

The above is the detailed content of Code example of WeChat applet modifying data to update page data in real time. For more information, please follow other related articles on the PHP Chinese website!