CODEWITHSUNDEEP
vuetify.js
Greg Merideth
Greg Merideth

Reputation: 49

Inconsistent click event from v-switch

I'm trying to catch the click of a v-switch prior to it flipping to see if a preexisting condition has been met. While logging e.target of the event I am getting 

<div class="v-input--selection-controls__ripple primary--text"></div>

as the result but every now and then I get

<input aria-checked="true" id="input-24" role="switch" type="checkbox" aria-disabled="false" value="Arizona">

Am I missing something in this or is this unexpected behavior?

Codepen Example

Upvotes: 0

Views: 488

Answers (1)

Bernardo Duarte
Bernardo Duarte

Reputation: 4264

What is happening is that you're clicking on two different elements.

When you click on the ball or around it in the grey area you click on this element:

switch

But when you click outside it but still inside the input you click on this other element:

enter image description here

However, both of then capture you click.

You could change your implementation to capture the change event:

<template v-slot:item.ia="{ item }">
  <v-switch
    v-model="ia_array"
    :key="item.id"
    :label="item.state"
    :value="item.state"
    @change="onChange"
  ></v-switch>
</template>

Upvotes: 1

Related Questions