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>
- [Vuejs]-Reuse my Vue component that contains x-template?
- [Vuejs]-Laravel & Vue.js. I Can't Fix My Code
Source:stackexchange.com