allow v-bind="$attrs" with v-on="$listeners" to work with v-model

Author: chrisvfritz

src/compiler/directives/model.js

@@ -39,7 +39,7 @@ export function genAssignmentCode (
 ): string {
   const modelRs = parseModel(value)
   if (modelRs.idx === null) {
-    return `${value}=${assignment}`
+    return `if (typeof (${assignment}) === 'object' && (${assignment}).type === 'input') { ${value}=(${assignment}).target.value } else { ${value}=${assignment} }`
   } else {
     return `$set(${modelRs.exp}, ${modelRs.idx}, ${assignment})`
   }

src/core/vdom/create-component.js

@@ -245,7 +245,7 @@ function mergeHook (one: Function, two: Function): Function {
 function transformModel (options, data: any) {
   const prop = (options.model && options.model.prop) || 'value'
   const event = (options.model && options.model.event) || 'input'
-  ;(data.props || (data.props = {}))[prop] = data.model.value
+  ;(data.attrs || (data.attrs = {}))[prop] = data.model.value
   const on = data.on || (data.on = {})
   if (isDef(on[event])) {
     on[event] = [data.model.callback].concat(on[event])

test/unit/features/directives/model-component.spec.js

@@ -148,4 +148,38 @@ describe('Directive v-model component', () => {
     vm.$refs.input.$emit('input', '   foo o  ')
     expect(vm.text).toBe('foo o')
   })
+
+  it('should work with v-bind="$attrs" plus v-on="$listeners"', done => {
+    const vm = new Vue({
+      data: {
+        msg: 'hello'
+      },
+      template: `
+        <div>
+          <p>{{ msg }}</p>
+          <test v-model="msg"></test>
+        </div>
+      `,
+      components: {
+        test: {
+          template: `<input v-bind="$attrs" v-on="$listeners">`
+        }
+      }
+    }).$mount()
+    document.body.appendChild(vm.$el)
+    waitForUpdate(() => {
+      const input = vm.$el.querySelector('input')
+      input.value = 'world'
+      triggerEvent(input, 'input')
+    }).then(() => {
+      expect(vm.msg).toEqual('world')
+      expect(vm.$el.querySelector('p').textContent).toEqual('world')
+      vm.msg = 'changed'
+    }).then(() => {
+      expect(vm.$el.querySelector('p').textContent).toEqual('changed')
+      expect(vm.$el.querySelector('input').value).toEqual('changed')
+    }).then(() => {
+      document.body.removeChild(vm.$el)
+    }).then(done)
+  })
 })