Skip to content

Commit

Permalink
fix(model): fix dynamic v-model with v-else statement
Browse files Browse the repository at this point in the history
  • Loading branch information
gebilaoxiong committed Oct 29, 2017
1 parent d1d8b58 commit c166df3
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 0 deletions.
9 changes: 9 additions & 0 deletions src/platforms/web/compiler/modules/model.js
Expand Up @@ -29,6 +29,8 @@ function preTransformNode (el: ASTElement, options: CompilerOptions) {
const typeBinding: any = getBindingAttr(el, 'type')
const ifCondition = getAndRemoveAttr(el, 'v-if', true)
const ifConditionExtra = ifCondition ? `&&(${ifCondition})` : ``
const elseStmt = getAndRemoveAttr(el, 'v-else', true)
const elseIfStmt = getAndRemoveAttr(el, 'v-else-if', true)
// 1. checkbox
const branch0 = cloneASTElement(el)
// process for on the main node
Expand Down Expand Up @@ -59,6 +61,13 @@ function preTransformNode (el: ASTElement, options: CompilerOptions) {
exp: ifCondition,
block: branch2
})

// v-else and v-else-if
if (elseStmt != null) {
branch0.else = true
} else if (elseIfStmt) {
branch0.elseif = elseIfStmt
}
return branch0
}
}
Expand Down
45 changes: 45 additions & 0 deletions test/unit/features/directives/model-dynamic.spec.js
Expand Up @@ -40,6 +40,51 @@ describe('Directive v-model dynamic input type', () => {
assertInputWorks(vm, chain).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-else', done => {
const vm = new Vue({
data: {
ok: true,
type: null,
test: 'b'
},
template: `<div v-if="ok">text</div><input v-else :type="type" v-model="test">`
}).$mount()
document.body.appendChild(vm.$el)

const chain = waitForUpdate(() => {
expect(vm.$el.textContent).toBe('text')
}).then(() => {
vm.ok = false
})

assertInputWorks(vm, chain).then(done)
})

it('with v-for', done => {
const vm = new Vue({
data: {
Expand Down

0 comments on commit c166df3

Please sign in to comment.