In my application, I display several tables with a loop. I put a v-model="selectAll" on the first row of the tables to be able to do a “select all” with a checkbox.
But it doesn’t work correctly because all the tables have the same “v-model”. How can I make each table have its own v-model to make the checkbox work ?
This is my html code :
<div id="app">
<div>
<div>
<div v-for="(dimension, index) in listQuestions" :key="index" >
<table class="table-questions" >
<thead>
<tr>
<th><input type="checkbox" @click="select(dimension)" v-model="selectAll" /></th>
<th>Sous-dimension</th>
<th>Item</th>
</tr>
</thead>
<tbody v-for="(question,i) in dimension.sousDimensions" >
<tr v-for="(item, p) in question.questions">
<!--some questions "barometre" disabled and checked by default-->
<td v-if="item.barometre"><input type="checkbox" checked disabled :id="'choice-' + item.id"/></td>
<td v-else ><input type="checkbox" v-model="selectCheck" :value="item.id" :id="'choice-' + item.id" /></td>
<td style="width: 60%"></td>
<td ></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
This is my javascript code :
const columns = [
{
key: 'sousdimensions',
scopedSlots: { customRender: 'name' },
},
{
key: 'item',
scopedSlots: { customRender: 'item' },
},
];
new Vue({
el: "#app",
methods: {
select(value) {
this.selectCheck = [];
if (!this.selectAll) {
for (var sousdim of value.sousDimensions)
{
for (var item of sousdim.questions)
{
this.selectCheck.push(item.id)
}
}
}
},
},
data: {
listQuestions:
[
{
"name": "Dimension 1",
"sousDimensions":
[
{
"name": "Sous dimension 1.1",
"questions":
[
{
"id": 1,
"item": "Item 1.1.1",
"barometre": false
},
{
"id": 2,
"item": "Item 1.1.2",
"barometre": false
},
{
"id": 3,
"item": "Item 1.1.3",
"barometre": true,
}
]
},
{
"name": "Sous dimension 1.2",
"questions":
[
{
"id": 4,
"item": "Item 1.2.1",
"barometre": false
},
{
"id": 5,
"item": "Item 1.2.2",
"barometre": false
},
{
"id": 6,
"item": "Item 1.2.3",
"barometre": true
}
]
},
{
"name": "Sous dimension 1.3",
"questions":
[
{
"id": 7,
"item": "Item 1.3.1",
"barometre": false
},
{
"id": 8,
"item": "Item 1.3.2",
"barometre": false
}
]
}
]
},
{
"name": "Dimension 2",
"sousDimensions":
[
{
"name": "Sous dimension 2.1",
"questions":
[
{
"id": 9,
"item": "Item 2.1.1",
"barometre": false
},
{
"id": 10,
"item": "Item 2.1.2",
"barometre": false
},
{
"id": 11,
"item": "Item 2.1.3",
"barometre": false
},
{
"id": 12,
"item": "Item 2.1.4",
"barometre": true
}
]
},
{
"name": "Sous dimension 2.2",
"questions":
[
{
"id": 13,
"item": "Item 2.2.1",
"barometre": false
},
{
"id": 14,
"item": "Item 2.2.2",
"barometre": false
},
{
"id": 15,
"item": "Item 2.2.3",
"barometre": false
},
{
"id": 16,
"item": "Item 2.2.4",
"barometre": true
}
]
}
]
}
],
columns,
selectCheck: [],
selectAll: false
},
},
)
And this is the fiddle to understand the problem : https://jsfiddle.net/chtouk/7xhn9q3w/21/
So i think i should give a unique v-model per table but I don't know how to do this...Any idea ?
Aucun commentaire:
Enregistrer un commentaire