1

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?

Data Mastery
  • 1,555
  • 4
  • 18
  • 60
  • 2
    See [this question](https://stackoverflow.com/questions/54928111/should-we-use-v-model-to-modify-vuex-store). – Decade Moon Sep 09 '20 at 10:45

0 Answers0