La case à cocher Vue renvoie Null lorsqu'elle n'est pas cochée

Question

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

Answer 1

Ah, la joie des cases à cocher... À l'époque où nous envoyions les formulaires POST au code backend, seules les cases à cocher envoyées dans la requête POST étaient cochées. S'ils sont générés dynamiquement, vous ne savez pas lesquels se trouvent dans le DOM mais n'avez aucune inspection.

Comment refactoriser le code pour que childFolders ait l'attribut isSelected Alors vous pouvez le faire

Je ne l'ai pas essayé, juste une supposition.