[Vuejs]-How to prevent click event in link or button using Vue directive

2👍

Vue registers the @click event first before v-noclick where you add a second click event listener on that element. When the <a> is clicked, the displayModal() function will be executed first, then the listener in the v-noclick directive will be executed. If the listeners were registered in the opposite order, then it would probably work.

That aside though, it doesn’t look like what you are trying to do should be done inside a custom directive. Instead you can do the same logic in the click handler itself:

<a @click="onClick">Foo</a>
onClick() {
  if (whatever) {
    this.displayModal()
  }
}

1👍

i couldn’t find a vue way to do this. but with js you can use conditional sequence like this

<a @click="cond && onClick"></a>

in this case if cond be equals to true then onClick will called

Leave a comment