In vue 2.2.0+, it support to customize v-model binding prop and event by model . However, this plugin still transform to default value and input when specifying model. I hoped that it could adopt model property.

example

Vue.component('my-checkbox', { 
  model: { 
    prop: 'checked', 
    event: 'change'
  }, 
  props: { // this allows using the `value` prop for a different purpose 
     value: String,  // use `checked` as the prop which take the place of `value`  
     checked: { 
        type: Number,
        default: 0
     }
  }, 
  // ...
})

<my-checkbox v-model="foo" value="some value"></my-checkbox>

<input  
   onInput={this.onChange}
   v-model={this.val}
 >

compile to :

h(
  "textarea",
  __WEBPACK_IMPORTED_MODULE_1_babel_helper_vue_jsx_merge_props___default()([
    {
      on: __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_defineProperty___default()(
        {
          input: function input(e) {
            return _this.onChange(e);
          }
        },
        "input",
        function input($$v) {
          _this3.val = $$v;
        }
      )
    },
    {
      directives: [
        {
          name: "model",
          value: _this3.val
        }
      ]
    },
  ])
);

the "input" event of "onInput" will be override

<input  
   v-model={this.val}
   onInput={this.onChange}
 >

compile to :

h(
  "textarea",
  __WEBPACK_IMPORTED_MODULE_1_babel_helper_vue_jsx_merge_props___default()([
    {
      on: {
        input: function input($$v) {
          _this3.val  = $$v;
        }
      }
    },
    {
      directives: [
        {
          name: "model",
          value: _this3.val
        }
      ]
    },
    {
      on: {
        input: function input(e) {
          return _this.onChange(e);
        }
      },
    }
  ])
);

This is happening with the new v2.0.0. html-tags should be in the dependencies section since peer dependencies are not automatically installed. The same should go for svg-tags.

https://github.com/nickmessing/babel-plugin-jsx-v-model/blob/master/index.js#L29

it will broken if the render function is not included in Vue Declaration (common render)
consider to use element access expression

I'm not sure if the bug is here or in babel-plugin-transform-vue-jsx, but trying to use v-model in Babel 7 results in this error:

This API has been removed. If you're looking for this functionality in Babel 7, you should import the '@babel/helper-module-imports' module and use the functions exposed  from that module, such as 'addNamed' or 'addDefault'.

  at File.addImport (node_modules/@babel/core/lib/transformation/file/file.js:112:11)
  at PluginPass.addImport (node_modules/@babel/core/lib/transformation/plugin-pass.js:30:22)
  at buildOpeningElementAttributes (node_modules/babel-plugin-transform-vue-jsx/index.js:182:25)
  at buildElementCall (node_modules/babel-plugin-transform-vue-jsx/index.js:116:17)
  at PluginPass.exit (node_modules/babel-plugin-transform-vue-jsx/index.js:20:26)
  at newFn (node_modules/@babel/traverse/lib/visitors.js:223:21)
  at NodePath._call (node_modules/@babel/traverse/lib/path/context.js:64:19)
  at NodePath.call (node_modules/@babel/traverse/lib/path/context.js:38:17)
  at NodePath.visit (node_modules/@babel/traverse/lib/path/context.js:108:8)
  at TraversalContext.visitQueue (node_modules/@babel/traverse/lib/context.js:135:18)

Possibly related to vuejs/babel-plugin-transform-vue-jsx#112.

Like lazy,number and options.How to use them?

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.

After adding v-model to something with v-show directive, v-show seems to be not work.

v-show works

<div
  v-model={ this.updateGroupForm.show }
  v-show={ showSetting }

v-show does not work

<div
  v-show={ showSetting }
  v-model={ this.updateGroupForm.show }

always get "true"

Had to make my component look ugly because I wanted to leverage this library but it throws and error if I use a prop.

At the markup level I apply a type to the form component and apply some conditionals if it's a password. It doesn't makes sense in my particular case to hard code each type along the way.

I assume this was a conscious decision but wanted to raise this point and possibly start a discussion around this because it's the one thing preventing me from using this plugin full scale (I love it btw, excellent job).

Might want to add an actual mounted test suite to ensure consistent behavior with the built-in v-model - it's a bit more complicated than the current transforms. A few things come to mind:

• multi-checkbox binding for Arrays
• select and option binding
• component binding

One thing we need to do in addition to the event and domProps is adding a v-model runtime directive so code here can be leveraged.

The plugin is expecting there to always be a DOM event object passed to the event callback. With custom inputs, the parameter given is the actual new value.

See https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events.