CODEWITHSUNDEEP
vue.jsvuetify.js
Wayne
Wayne

Reputation: 293

Vuetify checkbox in v-for only works if label clicked

Hi have the following statement.

<li
                v-for="(area, i) in areas"
                :key="i"
                style="display: flex; justify-content: space-evenly; flex-wrap: wrap;"
              >
                <v-checkbox
                  @click="areaClick"
                  v-model="area.areaChosen"
                  :id="area.id.toString()"
                  :label="area.area_description"
                  color="beige lighten-1"
                ></v-checkbox>
              </li>

It displays as follows: checkbox ul

My problem is that if you click on the checkbox itself (The square) then nothing happens however if you click on the label eg, Atlantic Seaboard then it works correctly.

I would like it to work when I click on the square as well.

Upvotes: 0

Views: 1124

Answers (3)

revoke
revoke

Reputation: 559

The problem could also be with your version of Vue/Vuetify. When I updated the libraries (Vue.js from 2.6.10 to 2.6.14 and Vuetify from 2.0.17 to 2.6.6), it started working.

Upvotes: 0

Hexodus
Hexodus

Reputation: 12927

You can also use @click.capture this will still allow you to click on both the checkmark and label.

<v-checkbox
  @click.capture="areaClick"
  v-model="area.areaChosen"
></v-checkbox>

Upvotes: 0

Matheus Valenza
Matheus Valenza

Reputation: 919

Thats why you're using @click handler. According to docs, try @change

Upvotes: 2

Related Questions