数据双向绑定Two-way binding does not support complex data paths currently. This two-wa

579 阅读1分钟

项目场景:

后端返回数据,小程序用wx:for循环数据,实现双向绑定提示报Two-way binding does not support complex data paths currently. This two-way binding is ignored

问题描述

model:value不能实现双向绑定,

wxml:

<view>
  <view  wx:for="{{listData}}"  wx:key="true" wx:for-index="i">
    <view>
      <view>时间:</view>
      <input type="text" model:value="{{item.applyTime}}" data-id="{{i}}" placeholder="请输入时间" />
    </view>
    <view>
      <view>机构:</view> 
      <input type="text" model:value="{{item.detectionCompany}}" data-id="{{i}}" placeholder="请输入机构" />
    </view>
  </view>
</view>

解决方案:

添加bindinput方法,实现双向绑定

wxml:

<view>
  <view  wx:for="{{listData}}"  wx:key="true" wx:for-index="i">
    <view>
      <view>时间:</view>
      <input type="text" model:value="{{item.applyTime}}" data-id="{{i}}" placeholder="请输入时间" bindinput="inputApplyTime"/>
    </view>
    <view>
      <view>机构:</view> 
      <input type="text" model:value="{{item.detectionCompany}}" data-id="{{i}}" placeholder="请输入机构" bindinput="inputDetectionCompany"/>
    </view>
  </view>
</view>

js:

data: {
    listData:[],
}
 //双向绑定数据
  inputApplyTime:function(e){
    var applyTime = e.detail.value
    var i = e.currentTarget.dataset.id
    this.data.listData[i].applyTime = applyTime
    this.setData({
      listData: this.data.listData
    })
  },
  inputDetectionCompany:function(e){
    var detectionCompany = e.detail.value
    var i = e.currentTarget.dataset.id
    this.data.listData[i].detectionCompany = detectionCompany
    this.setData({
      listData: this.data.listData
    })
  },