Vuejs - automatic event.preventDefault()

Question

right now, I need to add event.preventDefault() to all of my click events in my Vue.js buttons:

<button class="btn btn-primary" v-on:click="someAction($event)">Action</button></p>

methods: {
 someAction (e) {
   e.preventDefault()
   console.log('in some action')
 },
}

Does anyone know of a way have event.preventDefeault() be the default setting? Right now it's very annoying to have to include the event.preventDefault() in every click event.

Thanks in advance!

thanks - to confirm, in my case I should use `v-on:click.stop="someMethod"` right? — John Grayson, Mar 07 '18 at 05:50
`.prevent` if `event.preventDefault()` is what you want. `.stop` if `event.stopPropagation()` is what you want. — Jacob Goh, Mar 07 '18 at 05:51

score 71 · Answer 1 · edited Jul 15 '22 at 19:43

71

You can use prevent modifier:

@click.prevent="YourMethod"

You can look event modifier for more information.

edited Jul 15 '22 at 19:43

tony19

125,647
18
229
307

answered Mar 07 '18 at 07:07

Bhojendra Rauniyar

83,432
35
168
231

Vuejs - automatic event.preventDefault()

1 Answers1