Vuetify 复选框：如何停止点击事件？答案

【问题标题】：Vuetify checkbox: how to stop the click event?Vuetify 复选框：如何停止点击事件？
【发布时间】：2023-03-23 11:42:01
【问题描述】：

我试图有一个带有@click.stop.prevent="myEvent" 的复选框，在将复选框设置为 true 之前会询问它，但 stop 和 prevent 被忽略并且复选框仍然被激活。这里可能有什么问题？

这里是描述问题的一个小技巧：https://jsfiddle.net/ag63f9fm/49/

<v-checkbox @click.native.stop.prevent='ask($event)' :label="`Checkbox 1: ${checkbox1.toString()}`" v-model="checkbox1"></v-checkbox>

询问方法：

ask: function (event) {
    answer = confirm('really')
    console.log('Answer: ' + answer)
    if (!answer) {
        event.stopPropagation()
      event.preventDefault()
    }
    return answer
  }

【问题讨论】：

分享任何现场演示？
尝试添加native修饰符：@click.native.prevent
在事件处理程序中是否设置/更改复选框绑定到的视图模型的属性值？
我在发布问题后也尝试过原生。没有帮助。将尝试设置演示。
在问题中添加了一个演示

标签： vue.js vuetify.js

【解决方案1】：

这段代码运行良好：

<v-switch  :input-value="checked" @click.native.capture="changeStatus($event)"></v-switch>

methods: {
    changeStatus(event) {
        event.stopPropagation()
    }
}

【讨论】：

【解决方案2】：

好的，在 vuetify 上发布问题后，有人告诉我改用 click.capture，但我仍然不知道为什么简单的 event.stopPropagation()一开始就不起作用。

【讨论】：

event.stopPropagation() 防止事件冒泡到父元素，而 click.capture 防止事件向下传播到内部元素。根据我对 Vuetify 的了解，复选框可能是包含在父元素中的输入元素。点击父元素总是会触发输入元素，所以 click.capture 有意义。
谢谢详细解释！
我必须改用@click.native.prevent.stop.capture... capture 只是对我不起作用
@click.native="$event.stopPropagation()" 也有效

【解决方案3】：

我也遇到了同样的问题，但使用的是 v-radio-group。阅读 v-checkbox 的解决方案，我是这样解决的：

<v-radio-group v-model="dateFlow" hide-details>
  <v-radio
    label="Not booked yet"
    value="NOTBOOKED"
    @click.capture.stop="openConfirmDialog('NOTBOOKED')"
  ></v-radio>
  <v-radio
    label="Already booked"
    value="BOOKED"
    @click.capture.stop="openConfirmDialog('BOOKED')"
  ></v-radio>
</v-radio-group>

dateFlow 属性是这样定义的计算属性

computed: {
  dateFlow: {
    get() {
      return this.$store.getters["myStore/getDateFlow"];
    },
    set() {
    }
  }
}

selectedDateFlow 是直接在 data 中定义的属性：

data() {
  return {
    selectedDateFlow: null
  };
}

openConfirmDialog 方法定义如下：

openConfirmDialog(val) {
  // val contains the selected radio value
  this.selectedDateFlow = val;
  this.warningDialog = true;
}

然后我打开一个警告对话框，如果用户按下取消按钮，我会重置 selectedDateFlow 属性

closeWarningDialog() {
  this.selectedDateFlow = null;
  this.warningDialog = false;
},

否则我使用 selectedDateFlow 属性来更新我的商店中的 dateFlow 属性：

proceedAfterWarning() {
  // set the new value
  this.$store.commit("myStore/setDateFlow", this.selectedDateFlow);
  this.warningDialog = false;
},

希望对某人有所帮助:)

【讨论】：