为什么 vue-chartjs 不显示我传递的数据？

Question

开发 covid 应用程序以熟悉 vue2js。

我现在正在尝试使用 vue-chartjs 获取图表，但无法将数据传递给 graph/chart 组件。

我使用 vuex 发出 API 请求并将数据传递到我的组件：CountryGraph.vue 其中包含带有图表本身的 Graph.vue。

vuex -> CountryGraph.vue -> Graph.vue

将数据传递到 CountryGraph.vue 有效：

但是当我尝试将我的数据 (countryGraph) 作为道具传递给我的 char/Graph.vue 组件时，它没有完成，我只得到 Graph.vue 的值undefined:

为什么？

在我的代码下面，首先是 CountryGraph.vue:

<template>
    <section class="countryGraph">
        <LineChart
            :chartdata="chartData"
            :options="chartOptions"
        />
    </section>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import LineChart from "../graph/Graph";

export default {
    name: "CountryGraph",
    components: { LineChart },

    data: () => ({
        chartData: {
            labels: this.countryGraph.map((el) => el.date),
            datasets: [
                {
                    label: "Confirmed",
                    backgroundColor: "#f87979",
                    data: this.countryGraph.map(
                        (el) => el.confirmed
                    ),
                },
            ],
        },
        chartOptions: {
            responsive: true,
            maintainAspectRatio: false,
        },
    }),

    methods: {
        ...mapActions(["selectCountryGraph"]),
    },
    computed: {
        ...mapGetters(["countryGraph"]),
    },
};
</script>

<style></style>

我的 chart/Graph.vue 组件是这样制作的，我可以重复使用它（如 vue-chartjs guide 中所述）：

<script>
import { Bar } from "vue-chartjs";

export default {
    extends: Bar,

    props: {
        chartdata: {
            type: Object,
            default: null,
        },
        options: {
            type: Object,
            default: null,
        },
    },

    mounted() {
        this.renderChart(this.chartdata, this.options);
    },
};
</script>

<style />

当我使用模拟数据时，例如

labels: this.countryGraph.map((el) => el.data)

我愿意labels: ["q", "w", "e", "r", "t"] 而不是

data: this.countryGraph.map(el => el.confirmed)

我愿意data: [0, 1, 2, 3, 4]

一切正常。

此外，当我将变量直接传递到组件时，例如：

<LineChart
            :chartdata="this.countryGraph.map((el) => el.data)"
            :options="chartOptions"
        />

然后我可以在子 (Graph.vue) 组件中看到数据作为道具。但在这种情况下，我使用 v-bind: 而在较早的情况下则不使用。也许这就是问题所在？

Answer 1

需要注意的几个问题：

您似乎在映射一个不存在的属性（el.data 应该是 el.date）。可能只是问题中的错字。
```
this.countryGraph.map((el) => el.data) ❌
                                    ^
```

data() 不是反应式的，不能依赖计算属性，所以 countryGraph 计算属性在 data() 中不可用，也不会更新 chartData 有变化。解决此问题的一种方法是使 chartData 成为计算道具：

export default {
    computed: {
        ...mapGetters(["countryGraph"]),
        // don't use an arrow function here, as we need access to component instance (i.e., this.countryGraph)
        chartData() {
          return {
              labels: this.countryGraph.map((el) => el.date),
              datasets: [
                  {
                      label: "Confirmed",
                      backgroundColor: "#f87979",
                      data: this.countryGraph.map((el) => el.confirmed),
                  },
              ],
          }
        }
    }
}

为什么 vue-chartjs 不显示我传递的数据？

Why is vue-chartjs not showing my passed data?

javascript

vue.js

vuejs2

vue-chartjs