鍍金池/ 問答/HTML5  HTML/ 小程序 修改數(shù)組字段

小程序 修改數(shù)組字段

wxml模塊代碼:
<!--pages/registerInfo/registerInfo.wxml-->
<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:#f00' 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代碼:
const app = getApp()

Page({

/**

  • 頁面的初始數(shù)據(jù)

*/
data: {

activityId:null,
number:1,//默認(rèn)一人報(bào)名
multiform:[],
form:[]

},

/**

  • 生命周期函數(shù)--監(jiān)聽頁面加載

*/
onLoad: function (options) {

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

},
// 獲取問題列表
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;j++){
        if (data.data.signUpQuestionList[j].type==2){
          let optionsList=[]
          for (let k = 0; k < data.data.signUpQuestionList[j].options.length;k++){
            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; i++) {
        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()
  }
})

},

//獲取input值
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('當(dāng)前條current:'+current+';當(dāng)前present:'+present)
that.setData({
  multiform: resetForm
})

},

// 獲取下拉框值
bindPickerChange:function(e){

const that=this
console.log('picker發(fā)送選擇改變,攜帶值為', 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;i++){
  for(let j=0;j<formList[i].length;j++){
    const list=formList[i][j]
    console.log(list)
    if (list.isNeed){
      console.log(list.isNeed)
      if(list.type==1 && list.val==''){
        wx.showToast({
          title: '請完善報(bào)名信息',
          icon: 'none',
          duration: 2000
        })
        return
      }
    }
  }
}
// return
wx.setStorage({
  key: 'regInfo',
  data: this.data.multiform,
})
wx.navigateTo({
  url: '../confirm/confirm?activityId='+this.data.activityId,
})

},

})

問題描述: form為需要填寫的字段,而number為報(bào)名的人數(shù),通過遍歷number數(shù)量將form push到multiform生產(chǎn)對應(yīng)的需要報(bào)名人數(shù)的數(shù)組,例如

clipboard.png
當(dāng)前是兩個(gè)用戶需要填寫的內(nèi)容。

問題:現(xiàn)在存在的問題是bindinput和bindchange綁定的事件都將兩個(gè)用戶的字段填充了?

回答
編輯回答
毀了心

發(fā)現(xiàn)了,將數(shù)據(jù)寫死在data里面是可以單獨(dú)渲染選中字段的,但是動態(tài)渲染的話就不行...有知道怎么解決的么

更新于18.7.12
無關(guān)乎小程序問題,腦子一時(shí)懵了
其實(shí)就是對象的沒有進(jìn)行深度賦值,只是單純的把新對象的地址指向了舊對象,所以新對象屬性修改才會改變舊對象的屬性。所以想單純的進(jìn)行復(fù)制的話可以直接將對象類型轉(zhuǎn)換再轉(zhuǎn)換:parse.JSON(JSON.stringify(xx))。

2017年3月18日 04:48