Skip to content

Commit

Permalink
fix(v-model): v-if / v-else not working with :type + v-model (vuejs#6955
Browse files Browse the repository at this point in the history
  • Loading branch information
misoguy authored and lovelope committed Feb 1, 2018
1 parent 180f2e9 commit 28da4fd
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 0 deletions.
9 changes: 9 additions & 0 deletions src/platforms/web/compiler/modules/model.js
Original file line number Diff line number Diff line change
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 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
Expand Down Expand Up @@ -59,6 +61,13 @@ function preTransformNode (el: ASTElement, options: CompilerOptions) {
exp: ifCondition,
block: branch2
})

if (hasElse) {
branch0.else = true
} else if (elseIfCondition) {
branch0.elseif = elseIfCondition
}

return branch0
}
}
Expand Down
42 changes: 42 additions & 0 deletions test/unit/features/directives/model-dynamic.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,48 @@ describe('Directive v-model dynamic input type', () => {
assertInputWorks(vm, chain).then(done)
})

it('with v-else', done => {
const data = {
ok: true,
type: null,
test: 'b'
}
const vm = new Vue({
data,
template: `<div v-if="ok">haha</div><input v-else :type="type" v-model="test">`
}).$mount()
document.body.appendChild(vm.$el)
expect(vm.$el.textContent).toBe('haha')

vm.ok = false
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: {
Expand Down

0 comments on commit 28da4fd

Please sign in to comment.