Vue conditional v-on event prevent modifier

Question

How do I use v-on's .prevent modifier when I use it dynamically?

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

I'm trying to stop the URL being appended with /#

I've tried

v-on.prevent

v-on:prevent

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

Answer 1

It's much clearer if you move the logic into a method:

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

And then make the check in the script part:

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

---

Why are you even adding the anchor to your link? It's not necessary and you can save yourself the work.

---

Dynamically adding modifiers does not seem to be supported in Vue: https://github.com/vuejs/vue/issues/9417