get selected item in multiselect in vuejs component - vue.js

Question

In my component, i have multiselect that should get options selected on matched value passed:
<select class="custom-select" multiple="" v-model="items">
<option v-for="item in objects_list" :selected="itemSelected(item)" :key="item.id" :value="item.id">
{{item.name}}
</option>
</select>
...
methods() {
itemSelected(item) {
let selected;
let object_selected = this.value.filter(object => {
console.log(object)
if(item.id == object) {
return true;
}
});
}
the selected binding doesn't seems to work, how to correctly implement multiselect to bind selected options ?

Answer 1

The best way to do this is to use the CREATED Function from Vue.js
<template>
<div>
<select class="ur-CSS-class" multiple v-model="selected">
<option v-for="item in objects_list" :key="item.id" :value="item.id">
{{ item.name }}
</option>
</select>
<br />
<span>Selected : {{ selected }}</span>
</div>
</template>
<script>
var your_list = [
{ name: "one", id: 13 },
{ name: "two", id: 18 },
{ name: "three", id: 11 },
{ name: "four", id: 7 },
{ name: "five", id: 1 },
{ name: "six", id: 2 },
];
export default {
name: "App",
data() {
return {
objects_list: your_list,
selected: []
};
},
props:{
inputData: {
type: Object,
required: true
}
},
computed: {
selected() {
let selected = this.objects_list.filter(item => {
return this.inputData.find(i => i == item.id);
});
return selected;
}
}
};
</script>