Vue: Vue 2 requires explicit event binding for normal events

[johnleider]

Vue.js version

2.0.0-beta.1

Reproduction Link

https://jsbin.com/romelinoju/edit?html,output

Steps to reproduce

Click the buttons

What is Expected?

The first button should alert

What is actually happening?

It does not

Extra

If nothing is explicitly overwriting an event, shouldn't the basic ones still work? i.e. click, mouseenter etc.

[LinusBorg]

This is not a bug but a design decision. In 2.0, you can only listen for Vue events on components, not native events.

When used on a custom component, v-on now only listens to custom events $emitted by that component. (no longer listens to DOM events)

(https://github.com/vuejs/vue/issues/2873)

[johnleider]

Is there an example of the best way to transition to this? If I wrap a button, will I have to explicitly define all potential use cases for events?

[LinusBorg]

Yes, you will have to explcitly define all events and $emit

<button @click="$emit('click', $event)" ...other events...></button>

We generally try to reduce implicit behaviours in Vue 2.0 as they make reasoning about the code generally harder down the road. This often results in a little bit more boiler plate in obvious examples as this single wrapped button, but save people's sanity in more complex situations.

[johnleider]

Thank you!

[AnsonHwang86]

I found this issue has fixed within [email protected]
I change vuejs verson to 2.0.3 and add the the .native to @click ,it work.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-beta.1/vue.js"></script>
<btn @click="myMethod">Won't Alert</btn>

after changed

<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<btn @click.native="myMethod">Won't Alert</btn>

The document also explain the usage of .native https://vuejs.org/guide/components.html#Using-v-on-with-Custom-Events