V-for循环和Vue-Chart-js条形图

如何解决V-for循环和Vue-Chart-js条形图

当尝试通过vuex存储数组实现v-for循环时，我似乎遇到了一个问题。我想为每个类别创建一张卡片阵列，每张卡片都有自己的条形图。

这是html：

   <template>
        <v-container fluid>
          <v-row dense>
            <v-col
              v-for="card in getCards"
              :key="card.id"
              cols="12"
              :sm="card.flex"
              xs="1"
            >
            <v-card>
              <v-card-title class="title" v-text="card.title">
              </v-card-title>
              <bar-chart :data="barChartData" :options="barChartOptions" :height="200" />
              <p class="pa-4">Importance: {{ card.importance }} <br />
              Effectiveness: {{ card.effectiveness }} </p>
            </v-card>
            </v-col>
          </v-row>
        </v-container>
      </div>
</template>

这是我的JS的计算部分：

computed: {
    ...mapGetters("cards",["getCards"]),barChartData() {
      return {
        labels: ['Importance','Effectiveness'],datasets: [
          {
            backgroundColor: [chartColors.blue,chartColors.green],data: [this.importance,this.effectiveness]
          } 
        ]
      } 
    },radarChartData() {
      return {
        labels: ["Personal Growth","Leisure","Spirituality","Work","Health","Community & Environment","Family","Social","Intimate","Parenting"],datasets: [
          {
            label: "Importance",backgroundColor: 'rgb(54,162,235,0.75)',//data: [9,8,9,4,6,2,5],data: this.getCards.map(card => card.importance),},{
            label: "Effectiveness",backgroundColor: 'rgb(75,192,//data: [7,7,3,5,10,4],data: this.getCards.map(card => card.effectiveness),]
      }
    },card() {
      return this.getCards.find((el) => el.id === this.id)
    },effectiveness: {
      get() {
        return this.card.effectiveness
      },set(effectiveness) {
        this.$store.commit("cards/updateEffectiveness",{ card: this.card,effectiveness})
      },importance: {
      get() {
        return this.card.importance
      },set(importance) {
        this.$store.commit("cards/updateImportance",importance})
      },keywords: {
      get() {
        return this.card.keywords
      },set(keywords) {
        this.$store.commit("cards/updateKeywords",keywords})
      }
    }
  },}

每当我运行此代码时，都会不断出现以下错误：

TypeError: Cannot read property 'importance' of undefined

我试图将计算出的数据更改为：

barChartData() {
          return {
            labels: ['Importance',datasets: [
              {
                backgroundColor: [chartColors.blue,data: [this.getCards.map(card => card.importance),this.getCards.map(card => 
                        card.effectiveness)]
              } 
            ]
          } 
        },

虽然这实际上呈现了页面，但它没有实现我想要的（因为map函数正在数组中创建数组）。

这是我的vuex商店数据：

export const state = () => ({
  cards: [
    {
      title: "Personal Growth",src: require("~/assets/images/values/growth.svg"),flex: 6,id: "1",keywords: [],importance: "",effectiveness: "",{
      title: "Leisure",src: require("~/assets/images/customize.svg"),id: "2",{
      title: "Sprituality",src: require("~/assets/images/values/spirituality.svg"),id: "3",{
      title: "Work",src: require("~/assets/images/values/work.svg"),id: "4",{
      title: "Health",src: require("~/assets/images/values/health.svg"),id: "5",{
      title: "Community \n& Environment",src: require("~/assets/images/values/community.svg"),id: "6",{
      title: "Family Relationships",src: require("~/assets/images/values/family.svg"),id: "7",{
      title: "Social Relationships",src: require("~/assets/images/values/social.svg"),id: "8",{
      title: "Intimate Relationships",src: require("~/assets/images/values/intimate.svg"),id: "9",{
      title: "Parenting",src: require("~/assets/images/values/parenting.svg"),id: "10",],})

export const plugins = [createPersistedState()]

export const getters = {
  getCards: (state) => {
    return state.cards
  },}

export const mutations = {
  updateEffectiveness(state,{card,effectiveness}) {
    card.effectiveness = effectiveness
  },updateImportance(state,importance}) {
    card.importance = importance
  },updateKeywords(state,keywords}) {
    card.keywords = keywords
  }
}

有人对我在做什么错有任何想法吗？我是JS的新手。

请提前提出任何想法/解决方案！