微信小程序二层for循环input输入框的时候,如何以一定格式获取所有输入进的数据?

微信小程序二层for循环input输入框的时候,如何以一定格式获取所有输入进的数据?

问题描述:

我是大二初学者,遇到一个问题,代码如下:
js:

const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [1],
  },

  onLoad() {},

  // 减号键
  minus(e) {
    var list = this.data.list;
    var i = e.currentTarget.dataset.index
    if (list[i] > 0) {
      list[i]--;
      this.setData({
        list
      })
    }
  },

  // 加号键
  plus(e) {
    var list = this.data.list;
    var i = e.currentTarget.dataset.index
    if (list[i] < 5) {
      list[i]++
      this.setData({
        list
      })
    }
  },

  // 增减函数
  numIpt(e) {
    return Math.max(0, Math.min(e.detail.value, 5))
  },
  numBlur(e) {
    console.log(e)
    this.setData({
      ["list[" + e.currentTarget.dataset.index + "]"]: Number(e.detail.value)
    })
  },

  // 添加位置栏
  add(e) {
    var list = this.data.list
    list.push(0)
    this.setData({
      list
    })
  },

  // 删除位置栏
  del(e) {
    var list = this.data.list
    list.pop(0)
    this.setData({
      list
    })
  },

  // 提交和跳转按钮
  formSubmit: function (e) {
    // console.log(cate)
    console.log(e.detail.value.WeiZhi)
    console.log(e.detail.value)
    wx.navigateTo({
      url: '/pages/data/opinion'
    })
  },
})

wxml:

<form catchsubmit="formSubmit">
<view wx:for="{{list}}" wx:for-item="weizhi" wx:for-index="wz" wx:key="wzhi">
  <view class="title-vw">
    <button size="mini" data-index="{{wz}}" catchtap="minus">-</button>
    <input class="num-ipt" value="{{weizhi}}" data-index="{{wz}}" type="number" bindinput="numIpt" bindblur="numBlur" />
    <button size="mini" data-index="{{wz}}" catchtap="plus">+</button>
    <view style="flex-grow: 1;padding: 0 30rpx;">{{wz+1}}</view>
  </view>

    <input placeholder="输入位置" bindconfirm="NextInput" name="WeiZhi{{wz}}"></input>

  <view wx:for="{{weizhi}}" wx:for-item="xijie" wx:for-index="xj" wx:key="xjie">
    <text>————————————————————</text>
    <input placeholder="分项" bindconfirm="NextInput" name="FenXiang"></input>
    <input placeholder="所用材料" bindconfirm="NextInput" name="CaiLiao"></input>
    <input placeholder="所用数量" bindconfirm="NextInput" name="ShuLiang"></input>
    <input placeholder="高度" bindconfirm="NextInput" name="Height"></input>
    <input placeholder="宽度" bindconfirm="NextInput" name="Weight"></input>
  </view>
</view>
<button type="primary" catchtap="add">添加</button>
<button catchtap="del">删除</button>
<button formType="submit">下一步</button>
</form>

界面是这样的:

img


我想获取类似这样的数据:“位置1:卧室 分项1:床头柜,用料1:木头,数量1,宽:123,高:456 分项2:衣柜,”

我在网上搜索不到类似的资料,因为实在是确实不明白怎么写,希望各位可以赐教,不胜ganji

[{"position":"","items":[{"木头",1,123,456},{"衣柜"}]}]

有个思路是把输入框绑定的值设置成数组某一项的某个参数。例如你添加了两条数据,每条数据都要输入name,你的数据可以定义成list: [ {name: ' '},{name: ' '} ]。
每次增加一条就往list里加一个对象{name: ' '}。

原来问过类似的问题,但是实在是初学者,看不太懂,希望各位可以详细讲讲,感谢。