javascript - Chartjs + Vue.js - 无法读取未定义的属性 '_meta'

Question

我正在使用 Vue.js + Chartjs 构建一个应用程序。我在对服务进行 http 调用以获取数据、解析数据并将其传递到我的 Chartjs 组件时遇到问题。但是，我不断收到错误 Cannot read property '_meta' of undefined

以下是我的组件的相关部分:

<template>
    <Chartjs :data="chartData" />
</template>

export default {
data () {
    return {
        chartData: false
    }
},
created () {
    this.getData()
},
methods: {
    getData() {
    const opts = {
        url: 'some_url',
        method: 'get'
    }
    request.callRoute(opts).then(results => {
        this.chartData = results.data
    }).catch(err => {
        console.log(err)
    })
    }
},
components: {
    Chartjs
}
}

注意 - 如果我使用从我的请求返回的数据对 chartData 字段进行硬编码，则图表呈现良好。但是，如果我先为我的数据发出 http 请求，它就不起作用。

有人知道会发生什么吗？

提前致谢!

Answer 1

Vue 将使用初始的 chartData(它是一个 bool 值)渲染组件。您应该使用 v-if 或其他逻辑并在收到响应时呈现 Chartjs 组件。例如，您可以在 chartData 为 false 时显示加载消息/动画。