Vuetify 复选框单击触发两次 - JavaScript

当使用Vuetify复选框时，您可能会遇到单击触发两次的问题。这个问题的根本原因是因为复选框使用了v-model指令，而v-model绑定的是复选框的value值和用户选中复选框时的input事件。因此，每次点击都会触发两次（一次更新复选框的value值，一次触发input事件）。

有两种方法可以解决这个问题。

方法一：使用@click.native事件

@click.native是Vuetify提供的特殊事件，它会绑定主机元素（也就是复选框的根元素）上的原生click事件。这样，当用户点击复选框时，只会触发一次click事件，从而避免了问题的产生。

<template>
  <v-checkbox @click.native="handleClick" v-model="isChecked"></v-checkbox>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    }
  },
  methods: {
    handleClick() {
      console.log('复选框被点击了')
    }
  }
}
</script>

方法二：使用stop修饰符

stop修饰符可以防止事件冒泡，从而避免事件在父元素和祖先元素中的重复处理。因此，在使用v-model绑定复选框时，我们可以使用.stop修饰符，将input事件的冒泡阻止掉。

<template>
  <v-checkbox @click="handleClick" v-model="isChecked"></v-checkbox>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    }
  },
  methods: {
    handleClick() {
      console.log('复选框被点击了')
    }
  }
}
</script>

以上两种方法都可以解决Vuetify复选框单击触发两次的问题，具体使用哪种方法取决于您的喜好和情况。