Vue 条件 v-on 事件阻止修饰符

Question

.prevent动态使用v-on的修饰符时如何使用？

<a
  href="#"
  class="modal-overlay"
  aria-label="Close"
  v-on="overlayClickClosesModal ? { click: () => closeModal() } : {}"
/>

我正在尝试阻止附加 URL/#

我试过了

v-on.prevent

v-on:prevent

v-on="overlayClickClosesModal ? { 'click.prevent':

Answer 1

如果将逻辑移至方法中会更清晰：

<a href="#" @click="clickMethod">

然后在脚本部分进行检查：

clickMethod (event) {
    if (this.overlayClickClosesModal) {
        event.preventDefault();
    }
}

为什么要在链接中添加锚点？没有必要，您可以节省自己的工作。

Vue 中似乎不支持动态添加修饰符：https ://github.com/vuejs/vue/issues/9417