fix(v-model): should generate component-specific code for tags with "is" attribute

yyx990803 · yyx990803 · commit a1d1145c9123 · 2017-07-10T21:34:40.000+08:00
fix vuejs#6066
diff --git a/src/compiler/parser/index.js b/src/compiler/parser/index.js
@@ -483,7 +483,9 @@ function processAttrs (el) {
             )
           }
         }
-        if (isProp || platformMustUseProp(el.tag, el.attrsMap.type, name)) {
+        if (!el.component && (
+          isProp || platformMustUseProp(el.tag, el.attrsMap.type, name)
+        )) {
           addProp(el, name, value)
         } else {
           addAttr(el, name, value)
diff --git a/src/platforms/web/compiler/directives/model.js b/src/platforms/web/compiler/directives/model.js
@@ -40,7 +40,11 @@ export default function model (
     }
   }
 
-  if (tag === 'select') {
+  if (el.component) {
+    genComponentModel(el, value, modifiers)
+    // component v-model doesn't need extra runtime
+    return false
+  } else if (tag === 'select') {
     genSelect(el, value, modifiers)
   } else if (tag === 'input' && type === 'checkbox') {
     genCheckboxModel(el, value, modifiers)
diff --git a/test/unit/features/directives/model-component.spec.js b/test/unit/features/directives/model-component.spec.js
@@ -36,6 +36,41 @@ describe('Directive v-model component', () => {
     }).then(done)
   })
 
+  it('should work with native tags with "is"', done => {
+    const vm = new Vue({
+      data: {
+        msg: 'hello'
+      },
+      template: `
+        <div>
+          <p>{{ msg }}</p>
+          <input is="test" v-model="msg">
+        </div>
+      `,
+      components: {
+        test: {
+          props: ['value'],
+          template: `<input :value="value" @input="$emit('input', $event.target.value)">`
+        }
+      }
+    }).$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)
+  })
+
   it('should support customization via model option', done => {
     const spy = jasmine.createSpy('update')
     const vm = new Vue({

Original file line number	Diff line number	Diff line change
`@@ -483,7 +483,9 @@ function processAttrs (el) {`
`483`	`483`	`)`
`484`	`484`	`}`
`485`	`485`	`}`
`486`		`- if (isProp \|\| platformMustUseProp(el.tag, el.attrsMap.type, name)) {`
	`486`	`+ if (!el.component && (`
	`487`	`+ isProp \|\| platformMustUseProp(el.tag, el.attrsMap.type, name)`
	`488`	`+ )) {`
`487`	`489`	`addProp(el, name, value)`
`488`	`490`	`} else {`
`489`	`491`	`addAttr(el, name, value)`
Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,11 @@ export default function model (`
`40`	`40`	`}`
`41`	`41`	`}`
`42`	`42`
`43`		`- if (tag === 'select') {`
	`43`	`+ if (el.component) {`
	`44`	`+ genComponentModel(el, value, modifiers)`
	`45`	`+ // component v-model doesn't need extra runtime`
	`46`	`+ return false`
	`47`	`+ } else if (tag === 'select') {`
`44`	`48`	`genSelect(el, value, modifiers)`
`45`	`49`	`} else if (tag === 'input' && type === 'checkbox') {`
`46`	`50`	`genCheckboxModel(el, value, modifiers)`