Multiple choice and v-model with object array
I am using Vue.js 2.0 and the Element library.
I am working with several components . The v-model property is intended to pre-select any parameters. So if you have model: ['Option4']
, the selection will be preselected with option4
I would like to be able to v-model
array an object instead of a simple array containing the label of each option.
That is, instead of using, model: ['Option4']
I would like to use something like model: [{name:'Option4'}, {name:'Option5'}]
.
However, the preselection is not performed as expected.
Can this be done? If so, how?
<div id="app">
<template>
<el-select v-model="model" multiple placeholder="Select">
<el-option v-for="item in options" :label="item.label" :value="item.value">
</el-option>
</el-select>
</template>
</div>
var Main = {
data() {
return {
options: [{
value: 1,
label: 'Option1'
}, {
value: 2,
label: 'Option2'
}, {
value: 3,
label: 'Option3'
}, {
value: 4,
label: 'Option4'
}, {
value: 5,
label: 'Option5'
}],
model: ['Option4']
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
source to share
You must pass the value
object to an array options
.
var Main = {
data() {
return {
options: [{
value: 1,
label: 'Option1'
}, {
value: 2,
label: 'Option2'
}, {
value: 3,
label: 'Option3'
}, {
value: 4,
label: 'Option4'
}, {
value: 5,
label: 'Option5'
}],
model: [4]
}
}
}
Here is a working solution.
source to share