Vue checkbox returns Null when unchecked

Question

I'm writing a Vue application using Vuetify. In this application, I use v-for to iterate over an array of objects to build a list of cards. Inside each card is a checkbox that maps to a calculated getter/setter that updates the value in my Vuex store.

When the checkbox is selected, I log out the value and display the folder object. However, when unchecked, the value is an empty array. Is there any way to push a folder object into a setter when the checkbox is unchecked? I've tried using false-value but there seems to be no way to bind it to the folder object.

The following is the logic of the card:

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

The following is a bidirectional computed property that handles the selected folder in the settings 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 joy of checkboxes... Back in the day when we actually sent POST forms to the backend code, only the checkboxes sent in the POST request were checked. If they are generated dynamically, you don't know which ones are in the DOM but have no inspection.

How to refactor the code so that childFolders has the isSelected attribute Then you can do

I haven’t tried it, just guessing.