Как предотвратить событие клика в ссылке или кнопке с помощью директивы Vue

Question

Привет! Я играю с директивами vue и пытаюсь предотвратить событие click, если элемент имеет тег <a> или <button>.Поэтому мой вопрос: возможно ли это сделать с помощью директивы vue?

Html

<a 
    @click.stop.prevent="displayModal()"
    v-noclick="test">
    I'm a link
</a>

директива Vue

Vue.directive('noclick', {
    bind( elem, binding, vnode ) {

        let user = {'name': 'John Doe'}

        if( user ) {
            let hasAccess = false

            if( !hasAccess ) {
                if( elem.tagName === 'A' ) {
                    elem.addEventListener( 'click', ( event ) => {
                        //this should prevent the element on click event
                        //but not working

                        event.stopPropagation()
                        event.preventDefault()
                        event.stopImmediatePropagation()
                        return false
                    })
                    return true
                }
            }
        }
    }
}

Answer 1

Vue сначала регистрирует событие @click перед v-noclick, где вы добавляете прослушиватель события второго щелчка для этого элемента.При нажатии на <a> сначала будет выполняться функция displayModal(), затем будет выполняться прослушиватель в директиве v-noclick.Если бы слушатели были зарегистрированы в обратном порядке, то это, вероятно, сработало бы.

Однако, если не считать, что то, что вы пытаетесь сделать, должно выполняться внутри пользовательской директивы.Вместо этого вы можете сделать ту же логику в самом обработчике кликов:

<a @click="onClick">Foo</a>

onClick() {
  if (whatever) {
    this.displayModal()
  }
}