Support select multiple binding (fix #4755) (#4756)

* support select multiple binding

* improve select onchange handle

* update  style
This commit is contained in:
chengchao 2017-01-20 02:36:19 +08:00 committed by Evan You
parent 466e849c85
commit 9e38abca3e
2 changed files with 30 additions and 4 deletions

View File

@ -163,13 +163,14 @@ function genSelect (
}
const number = modifiers && modifiers.number
const assignment = `Array.prototype.filter` +
const selectedVal = `Array.prototype.filter` +
`.call($event.target.options,function(o){return o.selected})` +
`.map(function(o){var val = "_value" in o ? o._value : o.value;` +
`return ${number ? '_n(val)' : 'val'}})` +
(el.attrsMap.multiple == null ? '[0]' : '')
`return ${number ? '_n(val)' : 'val'}})`
const code = genAssignmentCode(value, assignment)
const assignment = '$event.target.multiple ? $$selectedVal : $$selectedVal[0]'
let code = `var $$selectedVal = ${selectedVal};`
code = `${code} ${genAssignmentCode(value, assignment)}`
addHandler(el, 'change', code, null, true)
}

View File

@ -262,6 +262,31 @@ describe('Directive v-model select', () => {
})
}
it('should work with multiple binding', (done) => {
const spy = jasmine.createSpy()
const vm = new Vue({
data: {
isMultiple: true,
selections: ['1']
},
template:
'<select v-model="selections" :multiple="isMultiple">' +
'<option value="1">item 1</option>' +
'<option value="2">item 2</option>' +
'</select>',
watch: {
selections: spy
}
}).$mount()
document.body.appendChild(vm.$el)
vm.$el.options[1].selected = true
triggerEvent(vm.$el, 'change')
waitForUpdate(() => {
expect(spy).toHaveBeenCalled()
expect(vm.selections).toEqual(['1', '2'])
}).then(done)
})
it('multiple with static template', () => {
const vm = new Vue({
template: