Vuetify: [Bug Report] Checkbox icon disabled when click event present

Created on 23 Dec 2018  路  2Comments  路  Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 1.4.0-beta.0
Vue: 2.5.21
Browsers: Chrome 70.0.3538.77
OS: Linux x86_64

Steps to reproduce

add an @click event with anything inside to a checkbox

Expected Behavior

clicking the checkbox icon should toggle the value

Actual Behavior

the value is not toggled. clicking the label still works
v-checkbox

Reproduction Link

https://codepen.io/anon/pen/qLmXOa

VCheckbox bug

Most helpful comment


Playground.vue

<template>
  <v-container>
    <div class="subtitle-1">Checkbox</div>
    <v-checkbox v-model="checkbox" label="John" value="John"></v-checkbox>
    <v-checkbox v-model="checkbox" label="Jacob" value="Jacob"></v-checkbox>

    <div class="subtitle-1">Checkbox with click</div>
    <v-checkbox v-model="checkbox" label="John" value="John" @click="onClick" :ripple="false"></v-checkbox>
    <v-checkbox v-model="checkbox" label="Jacob" value="Jacob" @click="onClick" :ripple="false"></v-checkbox>

    <div class="subtitle-1">Switch</div>
    <v-switch v-model="switchValue" label="John" value="John"></v-switch>
    <v-switch v-model="switchValue" label="Jacob" value="Jacob"></v-switch>

    <div class="subtitle-1">Switch with click</div>
    <v-switch v-model="switchValue" label="John" value="John" @click="onClick"></v-switch>
    <v-switch v-model="switchValue" label="Jacob" value="Jacob" @click="onClick"></v-switch>

    <div class="subtitle-1">Radio</div>
    <v-radio-group v-model="radio">
      <v-radio label="John" value="John"></v-radio>
      <v-radio label="Jacob" value="Jacob"></v-radio>
    </v-radio-group>

    <div class="subtitle-1">Radio with click</div>
    <v-radio-group v-model="radio">
      <v-radio label="John" value="John" @click="onClick"></v-radio>
      <v-radio label="Jacob" value="Jacob" @click="onClick"></v-radio>
    </v-radio-group>

    <pre>{{ { checkbox, switchValue, radio } }}</pre>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      checkbox: ['John'],
      switchValue: null,
      radio: null,
    }),
    methods: {
      onClick () {
        console.log('click')
      },
    },
  }
</script>

All 2 comments


Playground.vue

<template>
  <v-container>
    <div class="subtitle-1">Checkbox</div>
    <v-checkbox v-model="checkbox" label="John" value="John"></v-checkbox>
    <v-checkbox v-model="checkbox" label="Jacob" value="Jacob"></v-checkbox>

    <div class="subtitle-1">Checkbox with click</div>
    <v-checkbox v-model="checkbox" label="John" value="John" @click="onClick" :ripple="false"></v-checkbox>
    <v-checkbox v-model="checkbox" label="Jacob" value="Jacob" @click="onClick" :ripple="false"></v-checkbox>

    <div class="subtitle-1">Switch</div>
    <v-switch v-model="switchValue" label="John" value="John"></v-switch>
    <v-switch v-model="switchValue" label="Jacob" value="Jacob"></v-switch>

    <div class="subtitle-1">Switch with click</div>
    <v-switch v-model="switchValue" label="John" value="John" @click="onClick"></v-switch>
    <v-switch v-model="switchValue" label="Jacob" value="Jacob" @click="onClick"></v-switch>

    <div class="subtitle-1">Radio</div>
    <v-radio-group v-model="radio">
      <v-radio label="John" value="John"></v-radio>
      <v-radio label="Jacob" value="Jacob"></v-radio>
    </v-radio-group>

    <div class="subtitle-1">Radio with click</div>
    <v-radio-group v-model="radio">
      <v-radio label="John" value="John" @click="onClick"></v-radio>
      <v-radio label="Jacob" value="Jacob" @click="onClick"></v-radio>
    </v-radio-group>

    <pre>{{ { checkbox, switchValue, radio } }}</pre>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      checkbox: ['John'],
      switchValue: null,
      radio: null,
    }),
    methods: {
      onClick () {
        console.log('click')
      },
    },
  }
</script>

:ripple="false" is the bug fix for checkbox in case anyone else is looking

Was this page helpful?
0 / 5 - 0 ratings