fix(model): fix dynamic v-model with v-else-if statement

Author: gebilaoxiong

src/platforms/web/compiler/modules/model.js

@@ -30,6 +30,7 @@ function preTransformNode (el: ASTElement, options: CompilerOptions) {
       const ifCondition = getAndRemoveAttr(el, 'v-if', true)
       const ifConditionExtra = ifCondition ? `&&(${ifCondition})` : ``
       const hasElse = getAndRemoveAttr(el, 'v-else', true) != null
+      const elseIfCondition = getAndRemoveAttr(el, 'v-else-if', true)
       // 1. checkbox
       const branch0 = cloneASTElement(el)
       // process for on the main node
@@ -63,6 +64,8 @@ function preTransformNode (el: ASTElement, options: CompilerOptions) {
 
       if (hasElse) {
         branch0.else = true
+      } else if (elseIfCondition) {
+        branch0.elseif = elseIfCondition
       }
 
       return branch0

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

@@ -57,6 +57,31 @@ describe('Directive v-model dynamic input type', () => {
     assertInputWorks(vm).then(done)
   })
 
+  it('with v-else-if', done => {
+    const vm = new Vue({
+      data: {
+        foo: true,
+        bar: false,
+        type: null,
+        test: 'b'
+      },
+      template: `<div v-if="foo">text</div><input v-else-if="bar" :type="type" v-model="test">`
+    }).$mount()
+    document.body.appendChild(vm.$el)
+
+    const chain = waitForUpdate(() => {
+      expect(vm.$el.textContent).toBe('text')
+    }).then(() => {
+      vm.foo = false
+    }).then(() => {
+      expect(vm._vnode.isComment).toBe(true)
+    }).then(() => {
+      vm.bar = true
+    })
+
+    assertInputWorks(vm, chain).then(done)
+  })
+
   it('with v-for', done => {
     const vm = new Vue({
       data: {