Vue.js : How can I do native events handling of child component from parent component

I have a component that wraps an anchor:

Vue.component('wrapper-link',
template : `
<div>
<a href="xxx" v-on="$listeners">text link</a>
<div>
`
);


I'm using it like this in my app:

template:

<div id="app">
<wrapper-link @click.stop="onClickEvent"></wrapper-link>
</div>


script:

let app = new Vue(
el: '#app',
methods:
onClickEvent()
console.log('clicked');


)


I was expecting that after clicking text link, the native click-event would be blocked and the console would log 'clicked'; but none of that happened. The native click event worked (navigation occurred).

text link

click

I know of event.preventDefault(), but I want to use Vue's event modifiers.

event.preventDefault()

1 Answer
1

You used the .stop event modifier (calls event.stopImmediatePropagation()), but the behavior you're seeking is accomplished with .prevent (calls event.preventDefault()):

.stop

event.stopImmediatePropagation()

.prevent

event.preventDefault()

<wrapper-link @click.prevent="onClickEvent" />


Vue.component('wrapper-link',
template: `
<div>
<a href="http://google.com"
target="_blank"
v-on="$listeners">Google</a>
</div>
`
);

new Vue(
el: '#app',
methods:
onClick(e)
console.log('click');


)

<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
<wrapper-link @click.prevent="onClick" />
</div>

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.