Question

我正在办理住房表格，我被困在某处，我希望有人能帮我解决问题。

所以，当你在一个表格中选择你的房子有2层时，那么你就可以写出每个楼层有多少房间，厕所，阳台等......

我的问题是以某种方式“分组”这些答案，我可以将它发送到我的后端并“阅读”那些答案。

所以这就是我到目前为止所做的：

data() {
  return {
    flooroptions: [
      {
        name: 'Rooms',
        id: '1',
      },
      {
        name: 'Balcony',
        id: '2',
      },
      {
        name: 'Toilets',
        id: '3',
      },
    ],
    floors: '',
    floor1: [],
  },
}

如果我像这样循环：

<div class="" v-for="(opt, index) in flooroptions">
  <input type="number" name="" value="" v-model="floor1[index]">
</div>

我可以使用floor1查看我的数据：

{{ floor1 }}

但是如果在形式中某人选择了1楼有2个房间并且没有添加任何其他输入，那么我只到2楼

如何更好地解决这类问题？

PS。 Everyfloor将有这个flooroptions循环，他们可以输入每个楼层的每个选项的数量，我希望能够正确读取该数字..

Answer 1

如果我理解正确，我会...

data() {
  return {
    flooroptions: [
    {
      name: 'Rooms',
      id: '1',
    },
    {
      name: 'Balcony',
      id: '2',
    },
    {
      name: 'Toilets',
      id: '3',
    },
    ],
    numFloors: 2,
    floorData: [
      {'Rooms':0, 'Balcony':0, 'Toilets':2},
      {'Rooms':2, 'Balcony':1, 'Toilets':0}
    ],
  },
}

并像这样循环：

<div v-for="f in numFloors">
  <div class="" v-for="opt in flooroptions">
    <input type="number" name="" value="" v-model="floorData[f][opt.name]">
  </div>
</div>

或...如果你想传递更少的数据并且在背后知道了id

data() {
  return {
    flooroptions: {
      1: {
        name: 'Rooms'
      },
      2: {
        name: 'Balcony'
      },
      3: {
        name: 'Toilets'
      },
    },
    numFloors: 2,
    floorData: [
      {1:0, 2:0, 3:2},
      {1:2, 2:1, 3:0}
    ],
  },
}

并像这样循环：

<div v-for="f in numFloors">
  <div class="" v-for="(opt, i) in flooroptions">
    <input type="number" name="" value="" v-model="floorData[f][i]">
  </div>
</div>

组的Vue2动态v模型

1 个答案: