微信小程序动态表单项

解决小程序无法实现对象数据双向绑定。

wxml:

<cell
      title="团队成员及其联系方式"
      title-width="6em"
      title-style="margin-right: 12rpx;"
      >
  <view class="dynamic-form__body">
    <view class="dynamic-form__item" wx:for="{{tdcyjqlxfs}}" wx:key="index">
      <textarea placeholder="姓名" model:value="{{item.name}}" data-name="name" data-index="{{index}}" auto-height bindinput="bindInput"/>
      <textarea placeholder="电话" model:value="{{item.phone}}" data-name="phone" data-index="{{index}}" auto-height bindinput="bindInput"/>
    </view>
  </view>
  <view class="dynamic-form__footer">
    <button size="mini" bindtap="appendItem">添加</button>
  </view>
</cell>

js

Page({
  data: {
     tdcyjqlxfs: [{name:'',phone:''}], // 团队成员及其联系方式
  },
	appendItem(val){
    let {tdcyjqlxfs} = this.data
    tdcyjqlxfs.push({name:'',phone:''})
    console.log(tdcyjqlxfs)
    console.log(val)
    this.setData({
      tdcyjqlxfs: tdcyjqlxfs
    })
  },
  bindInput(e){
    let {tdcyjqlxfs} = this.data
    let {index,name} = e.currentTarget.dataset
    tdcyjqlxfs[index][name] = e.detail.value
    console.log(tdcyjqlxfs)
    this.setData({
      tdcyjqlxfs: tdcyjqlxfs
    })
  }
})