babel-plugin-jsx-v-model icon indicating copy to clipboard operation
babel-plugin-jsx-v-model copied to clipboard

Position of v-model is important

Open jchive opened this issue 8 years ago • 3 comments

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.

jchive avatar Oct 12 '17 12:10 jchive

same problem~

Jim-MK avatar Mar 07 '18 03:03 Jim-MK

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.

pedrosoares avatar Jun 06 '18 02:06 pedrosoares

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

nickmessing avatar Jul 06 '18 14:07 nickmessing