Mini Program modifies array fields

wxml module code:

< view class="contain" >
< view class="main" >

<view class="question" wx:for="{{multiform}}" wx:key="{{index}}"  wx:for-item="multi" wx:for-index="current">
  <view class="label" wx:for="{{multiform[current]}}" wx:key="{{index}}" wx:for-index="present">
    <view class="title">
      <text style="color:-sharpf00" wx:if="{{item.isNeed}}">*</text>
      {{item.name}}
    </view>
    <view class="detail" wx:if="{{item.type==1}}">
      <input data-present="{{present}}" data-current="{{current}}" bindinput="getVal" placeholder="{{item.tips}}" placeholder-class="phcolor"></input>
    </view>
    <view class="detail" wx:else>
      <picker bindchange="bindPickerChange" data-current="{{current}}" data-present="{{present}}" value="{{item.current}}" range="{{item.optionsList}}">
        <view class="picker">
          <text class="phcolor">{{item.optionsList[item.current]}}</text>
        </view>
      </picker>
    </view>
  </view>
</view>

< / view >
< view class="footer" >

<button bindtap="nextStep"></button>

< / view >
< / view >

js Code:
const app = getApp ()

Page ({

)

/ *

  • initial data of the page

* /
data: {

activityId:null,
number:1,//
multiform:[],
form:[]

},

/ *

  • Lifecycle function-- load the listening page

* /
onLoad: function (options) {

console.log(options)
this.setData({
  activityId:options.activityId,
  number:options.number
})
this.getQuestions()

},
/ / get the list of questions
getQuestions:function () {

const that=this
wx.showLoading({
  title: "",
  mask: true
});
wx.request({
  url: app.globalData.baseUrl + "/Application/appPost?action=Activity/getActivityQuestions.do",
  header: app.globalData.header,
  method: "post",
  data: {
    "activityId": that.data.activityId,
    "http_headers": app.globalData.http_headers
  },
  dataType: "json",
  success:(data)=>{
    console.log(data)
    if(data.data.result=="success"){
      let multiform = []
      for (let j = 0; j < data.data.signUpQuestionList.length;jPP){
        if (data.data.signUpQuestionList[j].type==2){
          let optionsList=[]
          for (let k = 0; k < data.data.signUpQuestionList[j].options.length;kPP){
            optionsList.push(data.data.signUpQuestionList[j].options[k].value)
          }
          data.data.signUpQuestionList[j].optionsList = optionsList
          data.data.signUpQuestionList[j].current=0
        }
        else{
          data.data.signUpQuestionList[j].val=""
        }
      }
      for (let i = 0; i < that.data.number; iPP) {
        const signList=data.data.signUpQuestionList
        multiform.push(signList)
      }
      that.setData({
        form:data.data.signUpQuestionList,
        multiform: multiform
      }) 
    }
    else{
      wx.showToast({
        title: data.data.text,
        icon: "none",
        duration: 2000
      })
    }
  },
  complete:()=>{
    wx.hideLoading()
  }
})

},

/ / get the input value
getVal:function (e) {

let that=this
const present = e.currentTarget.dataset.present
const current = e.currentTarget.dataset.current
const val=e.detail.value
let resetForm = [].concat(that.data.multiform)
resetForm[current][present].val=val
console.log("current:"+current+";present:"+present)
that.setData({
  multiform: resetForm
})

},

/ / get the drop-down box value
bindPickerChange:function (e) {

const that=this
console.log("picker", e.detail.value)
let multiform = that.data.multiform
const index = e.currentTarget.dataset.current
const present = e.currentTarget.dataset.present
console.log("index:"+index+";present:"+present)
multiform[index][present].current=e.detail.value
console.log(multiform[index][present])
this.setData({
  multiform: multiform
})

},

nextStep:function () {

const formList=this.data.multiform
for(let i=0;i<formList.length;iPP){
  for(let j=0;j<formList[i].length;jPP){
    const list=formList[i][j]
    console.log(list)
    if (list.isNeed){
      console.log(list.isNeed)
      if(list.type==1 && list.val==""){
        wx.showToast({
          title: "",
          icon: "none",
          duration: 2000
        })
        return
      }
    }
  }
}
// return
wx.setStorage({
  key: "regInfo",
  data: this.data.multiform,
})
wx.navigateTo({
  url: "../confirm/confirm?activityId="+this.data.activityId,
})

},

})

problem description: form is the field to be filled in, and number is the number of people who have signed up. By traversing the number of number, the array of people who need to sign up for form push to multiform production, for example,

clipboard.png
is currently what two users need to fill in.

problem: the problem now is that both bindinput and bindchange bound events populate the fields of both users?


found that writing data in data allows you to render selected fields separately, but not dynamically. Do you know how to solve it?

updated in 18.7.12
has nothing to do with Mini Program's problem. I was confused for a moment.
actually means that the object does not have a deep assignment, but simply points the address of the new object to the old object, so the property modification of the new object will change the properties of the old object. So if you want to simply copy, you can convert the object type directly and then convert it: parse.JSON (JSON.stringify (xx).

Menu