Set v-checkbox programmatically using Vue and Vuetify

Question

I'm building a list of v-checkboxes using this code

<div class="row form-group" v-for="(author, key) in authorData" :key="key">
                <v-layout row wrap>
                  <v-flex xs1 sm1 md1 text-xs-center>                   
                    <div>
                      <v-checkbox
                        label
                        :key="author.PmPubsAuthorID"
                        v-model="authorData[key].checked"
                        v-bind:id="author.PmPubsAuthorID.toString()"
                        color="success"
                        @change="authorCBClicked(authorData[key])"
                      ></v-checkbox>
                    </div>

The PmPubsAuthorID is a number like 1047602 and is a sequential number in the entire database, no 2 records are the same. When I run the code to build the list it works fine and shows a checkbox if the value is true. What I am trying to do is when a checkbox is checked in the

 authorCBClicked(author) {
    //PmPubsAuthorID = 1047602
      // alert(author.PmPubsAuthorID + " " );
  //    author.checked = false; does not work
  this.authorData[author.PmPubsAuthorID].checked = false; does not work
  this.authorData["1047602"].checked = false; does not work
  this.authorData[1047602].checked = false; does not work
  this.authorData[2].checked = false; does work

},

As you can see I have tried various ideas and the only one that seems to work is passing in an ordinal but I have no way of knowing that. Do I need to use an index when building the checkboxes?

The reason: I have a checkbox then when checked calls a dialog box that asks " Are you sure you want to "Add this item to the list" if they say yes I want the original checkbox to be checked but if they say no then the original checkbox needs to be false. I have found that if I try to set the checked status of the calling checkbox to false it does not work but works fine once outside that method. I have passed the key and author information to the new dialog and let it change the checkbox to false if needed

Thanks for the help.

Abdelillah Aissani Abdelillah Aissani · Accepted Answer · 2019-08-03T15:06:54

Just pass the key instead of the whole item to your method :

@change="authorCBClicked(key)"

and on your method :

authorCBClicked(key) {
  this.authorData[key].checked = !this.authorData[key].checked;
}

Or :

you can do it directly on the template :

 @change="author.checked = !author.checked"

Set v-checkbox programmatically using Vue and Vuetify

1 Answers