La case à cocher Vue renvoie Null lorsqu'elle n'est pas cochée
J'écris une application Vue en utilisant Vuetify. Dans cette application, j'utilise v-for pour parcourir un tableau d'objets afin de créer une liste de cartes. À l'intérieur de chaque carte se trouve une case à cocher qui correspond à un getter/setter calculé qui met à jour la valeur dans ma boutique Vuex.
Lorsque la case est cochée, je désenregistre la valeur et affiche l'objet dossier. Cependant, lorsque cette case n'est pas cochée, la valeur est un tableau vide. Existe-t-il un moyen de pousser un objet dossier dans un setter lorsque la case n'est pas cochée ? J'ai essayé d'utiliser une valeur fausse, mais il ne semble y avoir aucun moyen de la lier à l'objet dossier.
Voici la logique de la carte :
<v-col v-for="folder in childFolders" :key="folder.id">
<v-card class="mb-2 object-card">
<v-list-item two-line class="two-line">
<v-list-item-action>
<v-checkbox v-model="selectedFolders" :ripple="false" :value="folder" />
</v-list-item-action>
</v-list-item>
</v-card>
</v-col>
Voici la propriété calculée bidirectionnelle qui gère le dossier sélectionné dans le magasin de paramètres :
selectedFolders: {
get: function(){
return this.$store.getters.selectedFolders
},
set: function(folder){
console.log(folder) // returns [{}] when checking and returns [] when unchecking
return this.$store.commit('selectMainItem', folder)
}
}
