J'essaie de cocher une seule case, mais lorsque je coche la case, le reste est également coché. Pourquoi cela se produit-il? Toute sorte de documentation à ce sujet?
<md-layout v-for="Location in Locations" :key="Location.id">
<md-checkbox v-model="checkbox" class="md-warn">{{ Location.city }}</md-checkbox>
</md-layout>
data () {
return {
checkbox: false,
Locations: [{
id: 1,
city: "1"
}, {
id: 2,
city: "2"
}, {
id: 3,
city: "3"
}, {
id: 4,
city: "4"
}, {
id: 5,
city: "5"
}, {
id: 6,
city: "6"
}]
Réponses:
2 pour la réponse № 1Depuis le v-model pour chaque case à cocher est la variable checkbox, la valeur de cette variable est liée à chacun des composants. Tu veux le v-model de chaque composant case à cocher d'avoir sa propre variable à référencer.
Vous pourriez transformer votre checkbox Booléen dans un checkboxes Objet, avec clés d'index pour chaque ID d'emplacement:
data() {
return {
checkboxes: {
1: false,
2: false,
3: false,
4: false,
5: false,
6: false,
},
...
Puis dans votre modèle, référencez chaque checkboxes valeur de la propriété par le Location.id:
<md-checkbox v-model="checkboxes[Location.id]" class="md-warn">
Ou, si cela ne vous dérange pas d’affecter le Locations propriété de données, vous pouvez simplement vous lier à un selected propriété de chaque emplacement:
<md-checkbox v-model="Location.selected" class="md-warn">