Codebeispiel für das WeChat-Applet zum Ändern von Daten, sodass Seitendaten in Echtzeit aktualisiert werden können

In diesem Artikel finden Sie ein Codebeispiel für das WeChat-Applet zum Ändern von Daten, um Seitendaten in Echtzeit zu aktualisieren. Ich hoffe, dass es für Sie hilfreich ist.

Anforderung: Ändern Sie den checkResult-Wert in der dataList, indem Sie auf die Schaltfläche klicken und den Schaltflächenstatus ändern.

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]: '异常'
          })
        }
    },
})

Das obige Beispiel verwendet this.setData, um den Wert in den Daten zu ändern, um die Daten mit der Front-End-Seite konsistent zu halten, was einer bidirektionalen Datenbindung in Vue entspricht.
Wenn keine Datenkonsistenz erforderlich ist, können Sie auch this.data.Object verwenden, um Werte zu ändern und abzurufen.

Das obige ist der detaillierte Inhalt vonCodebeispiel für das WeChat-Applet zum Ändern von Daten, sodass Seitendaten in Echtzeit aktualisiert werden können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!