nickmessing / babel-plugin-jsx-v-model

JSX Syntactic Sugar Plugin for v-model
MIT License
155 stars 12 forks source link

Position of v-model is important #9

Open jchive opened 6 years ago

jchive commented 6 years ago

I'm adding events to an input inside a component, specifically like the following

<input  v-model={this.value} on-keypress={this.keypress} />

But I receive an error in the console

index.js?9ef6:50 Uncaught TypeError: Cannot read property 'apply' of undefined
    at eval (index.js?9ef6:50)
    at HTMLInputElement.invoker (vue.esm.js?efeb:1821)

The keypress event is not fired in the component.

If I change it to be

<input  on-keypress={this.keypress} v-model={this.value} />

Then the event is called.

In both cases this.value is correctly bound to the value of the input.

The error is coming from the babel-helper-vue-jsx-merge-props mergeJSXProps function, so I initially raised an issue there, but am raising an issue here as it is only happening when the v-model attribute is being used.

This also effects other events, such as click and move events, if they are placed after the v-model attribute, the exception will occur.

Jim-MK commented 6 years ago

same problem~

pedrosoares commented 6 years ago

I have a similar problem, but inverse. Not Work: <select class="select" onChange={this.onCity} v-model={this.client.city_id} > Work: <select class="select" v-model={this.client.city_id} onChange={this.onCity} > No error are throwed.

nickmessing commented 6 years ago

I'm currently rewriting this plugin in nickmessing/jsx repo and it will attempt to mirror vue-template-compiler 1 on 1