Question

我尝试创建一个带有@ 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方法：

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() {
  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;
},

希望对大家有所帮助:)

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

2 个答案: