Picture a Vuejs-Application equipped with Vuex. I am aiming to incorporate a mulitselect-dropdown. Here's a basic example inside the Vue-component:
<template>
<div>
<multiselect
v-model="values"
:options="options">
</multiselect>
</div>
</template>
<script>
import Multiselect from 'vue-multiselect'
export default {
components: { Multiselect },
data () {
return {
values: null,
options: ['bar', 'foo', 'hello','test']
}
}
}
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
When I initialize "values" in data like this:
values: ["test"]
The multiselect-dropdown will show "test" as the already selected option. It can also be deselected by clicking and then reselected since it is part of the available options.
If I attempt to set my values as:
values:[this.$store.state.variableIwantPreselected]
It doesn't seem to work fully. In the selection-area/dropdown search field, those green boxes with the selected item names are usually displayed. However, instead of displaying the string that is stored in this.$store.state.variableIwantPreselected, only a small green box with no text appears.
I believe there might be something missing regarding Vuex and lifecycle hooks, but I haven't been able to pinpoint it yet.