[Vuejs]-Vue2 dynamic v-model for a group

0👍

if I understand correctly, I would…

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}
    ],
  },
}

and loop through like this:

<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>

or… if you want to pass less data and the id’s are know on the backen

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}
    ],
  },
}

and loop through like this:

<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>

Leave a comment