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

Aaron Reese · Accepted Answer · 2022-03-26 00:14:41Z

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.

answered Mar 26, 2022 at 0:14

Aaron Reese

5547 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Doe Over a year ago

Thank you for the insight! I didn't want to follow this route initially because I wanted to avoid manipulating the objects in the original data array. However, this seems to be the best solution that I can find for now.

Aaron Reese Over a year ago

It is also the Vue way of doing things. Have the data drive the DOM not the other way around. If you look at React, it does it too. React doesn't have a native 2-way binding. Your action updates the data which is then reflected in the DOM. If you don't want to amend the original data, then make a deep clone of the original and use the copy instead. especially if you need to be able to return to original state.

Collectives™ on Stack Overflow

Vue Checkbox Returning Null When Unckecked

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related