0

我正在研究住房表格，但我被困在某个地方，我希望有人能给我解决我的问题。

因此，当您选择您的房子有 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 个房间并且没有添加任何其他输入，而我只到达 floor1 2

解决此类问题的更好方法是什么？

PS。每个楼层都会有这个 flooroptions 循环，他们可以为每个楼层输入每个选项的编号，我希望能够正确读取该编号..

4

1 回答 1

0

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

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>
于 2017-11-19T05:35:57.663 回答