Vue Checkbox Returning Null When Unckecked

Question

I'm writing a Vue application with Vuetify. In this app, I'm iterating through an array of objects using v-for to build a list of cards. Within each card is a checkbox that is mapped to a computed getter/setter that updates the value in my Vuex store.

When selecting the checkbox, I log out the value and the folder object is displayed. However, when unchecking, the value is an empty array. Is there any way for me to push the folder object into the setter when the checkbox is unchecked? I've tried using false-value and there doesn't seem to be a way for me to bind that to the folder object.

Below is the logic for the cards:

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

Below is the two-way computed property that handles setting the selected folders in the store:

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, the joys of checkboxes... Back in the day when we really did POST forms to the back end code, only checkboxes that were checked where sent in the POST request. If they were dynamically generated you had no idea which ones where in the DOM but not checked.

how about refactoring the code so that childFolders has a property of isSelected then you can do <v-checkbox :checked="folder.isSelected" :ripple="false" :value="folder" @click="folder.isSelected = !folder.isSelected"/>

not tried it, just guessing.