fix(v-model): allow arbitrary naems for type binding (vuejs#6802)

Fix vuejs#6800
erweixin · Dec 15, 2017 · 5bba710 · 5bba710
1 parent 09042b0
commit 5bba710
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/src/platforms/web/compiler/modules/model.js b/src/platforms/web/compiler/modules/model.js
@@ -36,7 +36,7 @@ function preTransformNode (el: ASTElement, options: CompilerOptions) {
       addRawAttr(branch0, 'type', 'checkbox')
       processElement(branch0, options)
       branch0.processed = true // prevent it from double-processed
-      branch0.if = `type==='checkbox'` + ifConditionExtra
+      branch0.if = `(${typeBinding})==='checkbox'` + ifConditionExtra
       addIfCondition(branch0, {
         exp: branch0.if,
         block: branch0
@@ -47,7 +47,7 @@ function preTransformNode (el: ASTElement, options: CompilerOptions) {
       addRawAttr(branch1, 'type', 'radio')
       processElement(branch1, options)
       addIfCondition(branch0, {
-        exp: `type==='radio'` + ifConditionExtra,
+        exp: `(${typeBinding})==='radio'` + ifConditionExtra,
         block: branch1
       })
       // 3. other

diff --git a/test/unit/features/directives/model-dynamic.spec.js b/test/unit/features/directives/model-dynamic.spec.js
@@ -4,15 +4,15 @@ describe('Directive v-model dynamic input type', () => {
   it('should work', done => {
     const vm = new Vue({
       data: {
-        type: null,
+        inputType: null,
         test: 'b'
       },
-      template: `<input :type="type" v-model="test">`
+      template: `<input :type="inputType" v-model="test">`
     }).$mount()
     document.body.appendChild(vm.$el)
 
     // test text
-    assertInputWorks(vm).then(done)
+    assertInputWorks(vm, 'inputType').then(done)
   })
 
   it('with v-if', done => {
@@ -87,7 +87,11 @@ describe('Directive v-model dynamic input type', () => {
   })
 })
 
-function assertInputWorks (vm, chain) {
+function assertInputWorks (vm, type, chain) {
+  if (typeof type !== 'string') {
+    if (!chain) chain = type
+    type = 'type'
+  }
   if (!chain) chain = waitForUpdate()
   chain.then(() => {
     expect(vm.$el.value).toBe('b')
@@ -99,7 +103,7 @@ function assertInputWorks (vm, chain) {
     expect(vm.test).toBe('c')
   }).then(() => {
     // change it to password
-    vm.type = 'password'
+    vm[type] = 'password'
     vm.test = 'b'
   }).then(() => {
     expect(vm.$el.type).toBe('password')
@@ -109,7 +113,7 @@ function assertInputWorks (vm, chain) {
     expect(vm.test).toBe('c')
   }).then(() => {
     // change it to checkbox...
-    vm.type = 'checkbox'
+    vm[type] = 'checkbox'
   }).then(() => {
     expect(vm.$el.type).toBe('checkbox')
     expect(vm.$el.checked).toBe(true)