Question

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

<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

Answer 2

由于您有条件地使用相同的事件（click），因此您只需执行以下操作即可：

    v-on:click.prevent="overlay ? close(): {}"

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data() {
    return {
      overlay: true

    }
  },
  methods: {
    close() {
      console.log("close")
    }
  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">

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

Answer 3

一种解决方案是用事件处理程序内对event modifier的直接调用替换.prevent event.preventDefault()：

<a
  href="#"
  class="modal-overlay"
  aria-label="Close"
  v-on:click="maybeCloseModal"
/>

使用maybeCloseModal部分中定义的methods方法，例如：

maybeCloseModal: function (event) {
  if (this.overlayClickClosesModal) {
    event.preventDefault();  // this will do the same thing as .prevent
    this.closeModal();
  }
}

但是，老实说，我不确定这是否对您而言确实是明智的选择，因为单击链接的默认行为似乎没有任何用处。因此，您可能希望无条件地阻止它，例如像这样：

<a
  href="#"
  class="modal-overlay"
  aria-label="Close"
  v-on:click.prevent="overlayClickClosesModal && closeModal()"
/>

为此，您可能也想将aria-label设置为以相同的布尔标志为条件。甚至可能只有两种不同的叠加层版本-一个可点击和一个不可点击-然后使用v-if在它们之间进行选择。

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

3 个答案: