Skip to content

Commit

Permalink
Support select multiple binding (fix #4755) (#4756)
Browse files Browse the repository at this point in the history
* support select multiple binding

* improve select onchange handle

* update  style
  • Loading branch information
defcc authored and yyx990803 committed Jan 19, 2017
1 parent 466e849 commit 9e38abc
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 4 deletions.
9 changes: 5 additions & 4 deletions src/platforms/web/compiler/directives/model.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}

Expand Down
25 changes: 25 additions & 0 deletions test/unit/features/directives/model-select.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down

0 comments on commit 9e38abc

Please sign in to comment.