Currently, I am utilizing Vue.js 2.0 in combination with the Element UI library.
My focus is on a multiple select component. The v-model attribute allows for pre-selection of options. For instance, if you have model: ['Option4'], Option4 will be preselected in the select field.
I am interested in being able to use v-model with an array of objects rather than just an array containing option labels.
Instead of using model: ['Option4'], I would like to use something like
model: [{name:'Option4'}, {name:'Option5'}]However, this approach does not properly handle pre-selecting the options.
Is it feasible to achieve this functionality? If so, how can it be accomplished?
<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')