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

Question

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

这是一个 fiddle 问题描述：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
  }

Answer 1

好的，在 vuetify 上发布问题后，我被告知要改用 click.capture，但我仍然不知道为什么简单的 event.stopPropagation() 不起作用第一名.

Answer 2

我也遇到了同样的问题，但与 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;
},

希望对大家有所帮助:)

Answer 3

此代码工作正常：

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

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

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

Vuetify checkbox: how to stop the click event?

vue.js

vuetify.js