Bill
Bill

Reputation: 1477

Get the status of a v-checkbox Vue.JS Vuetify

I'm building a group of v-checkboxes

              <div class="row form-group" v-for="(author, key) in authorData" :key="key">

                <v-checkbox
                    label
                    :key="author.PmPubsAuthorID"
                    v-model="author.checked"
                    v-bind:id="author.PmPubsAuthorID.toString()"
                    color="success"
                    @change="authorCBClicked()"
                  ></v-checkbox>

How can I determine the status of the checkbox checked or unchecked? I've Googled and have not found the answer. I don't want to use the dom object and would like to stay with Vue structure.

I've tried

      @change="authorCBClicked(key)" 

but that did not help. As you can tell I'm a Vue new users so any help is very much appreciated .

Upvotes: 1

Views: 1032

Answers (2)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You should bind in this way v-model="authorData[key].checked" and use @input event like:

<div class="row form-group" v-for="(author, key) in authorData" :key="key">

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

Upvotes: 1

niccord
niccord

Reputation: 844

The checkbox is v-binded, so author.checked should reflect the value set by the user.

Upvotes: 0

Related Questions