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

Question

当尝试通过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, 8, 9, 4, 6, 2, 8, 9, 5],
            data: this.getCards.map(card => card.importance),
          },
          {
            label: "Effectiveness",
            backgroundColor: 'rgb(75, 192, 192, 0.75)',
            //data: [7, 7, 7, 6, 3, 5, 10, 6, 7, 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", { card: this.card, importance})
      },
    },
    keywords: {
      get() {
        return this.card.keywords
      },
      set(keywords) {
        this.$store.commit("cards/updateKeywords", { card: this.card, keywords})
      }
    }
  },
}

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

TypeError: Cannot read property 'importance' of undefined

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

barChartData() {
          return {
            labels: ['Importance', 'Effectiveness'],
            datasets: [
              {
                backgroundColor: [chartColors.blue, chartColors.green],
                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"),
      flex: 6,
      id: "2",
      keywords: [],
      importance: "",
      effectiveness: "",
    },
    {
      title: "Sprituality",
      src: require("~/assets/images/values/spirituality.svg"),
      flex: 6,
      id: "3",
      keywords: [],
      importance: "",
      effectiveness: "",
    },
    {
      title: "Work",
      src: require("~/assets/images/values/work.svg"),
      flex: 6,
      id: "4",
      keywords: [],
      importance: "",
      effectiveness: "",
    },
    {
      title: "Health",
      src: require("~/assets/images/values/health.svg"),
      flex: 6,
      id: "5",
      keywords: [],
      importance: "",
      effectiveness: "",
    },
    {
      title: "Community \n& Environment",
      src: require("~/assets/images/values/community.svg"),
      flex: 6,
      id: "6",
      keywords: [],
      importance: "",
      effectiveness: "",
    },
    {
      title: "Family Relationships",
      src: require("~/assets/images/values/family.svg"),
      flex: 6,
      id: "7",
      keywords: [],
      importance: "",
      effectiveness: "",
    },
    {
      title: "Social Relationships",
      src: require("~/assets/images/values/social.svg"),
      flex: 6,
      id: "8",
      keywords: [],
      importance: "",
      effectiveness: "",
    },
    {
      title: "Intimate Relationships",
      src: require("~/assets/images/values/intimate.svg"),
      flex: 6,
      id: "9",
      keywords: [],
      importance: "",
      effectiveness: "",
    },
    {
      title: "Parenting",
      src: require("~/assets/images/values/parenting.svg"),
      flex: 6,
      id: "10",
      keywords: [],
      importance: "",
      effectiveness: "",
    },
  ],
})

export const plugins = [createPersistedState()]

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

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

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

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