How can I dynamically select values in a multi-select box based on an array using Vue.js? I've attempted a solution but it's not working as expected. Any suggestions or help would be greatly appreciated.
<div id="app">
<select class="multiselect" v-model="mySelect" multiple class="multi-size">
<option>Access</option>
<option>BA Briefings</option>
<option>Change Management</option>
<option>Clearance</option>
<option>Communications</option>
<option>CONUS</option>
<option>Delay</option>
<option>Disruption</option>
<option>eQIP</option>
<option>Field Ops</option>
</select>
<button @click="add">Add selection</button>
</div>
new Vue({
el: "#app",
data() {
return {
mySelect:'',
selData: ["Access", "BA Briefings", "CONUS", "Delay"]
}
},
methods: {
add: function(){
this.selData.forEach(data=>{
this.mySelect = data;
})
}
}
})
Check out this example pen.