I try to use a v-select
input that uses the data I receive from my Vuex store. I have to use a computed property, since my data gets passed from an API.
My template looks like this.
<template>
<v-card v-if="isMounted">
<v-select
v-model="chartData.selected"
:items="chartData.items"
label="Select Item"
multiple
>
</v-select>
{{chartData.selected}}
</v-card>
</template>
<script>
import {mapState} from "vuex"
export default {
data: function () {
return {
isMounted: false,
value: []
}
},
computed: {
...mapState(["clusterValues"]),
chartData() {
return {
items: this.clusterValues.data,
selected: this.clusterValues.data,
}
}
}
}
</script>
I binded this computed property to v-model
. However it does not update accordingly. I guess it does not work out with a computed property. (Vue.js - Input, v-model and computed property)
v-model="value"
. This works, but I it does not allow me to start with every item selected.
Starting like this does not work out: value: this.$store.state.clusterValues
How can I solve this problem?