vue.js - vue-chartjs 从父组件加载数据

Question

我有一个折线图组件，代码如下:

<script>
  import { Line } from 'vue-chartjs'

  export default {
    extends: Line,
    props: ['data', 'options'],
    mounted () {
      this.renderChart(this.data, this.options)
    }
  }
</script>

我想在另一个组件中使用此组件，因为我可以影响组件 Chart.vue 的 data 和 options 值的数据。

我是 VueJS 新手，无法理解 vue-chartjs 文档中的示例。

这是我的组件，它将成为父组件，以及我现在所做的事情:

<template>
  <div class="dashboard">
    <chart></chart>
  </div>

</template>

<script>
  import Chart from '@/components/Chart'

  export default {
    name: 'DashBoard',
    components: {
      'chart': Chart
    },
    mounted () {},
    data () {
      return {
        datacollection: null
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Answer 1

您的数据来自哪里？ 您的示例代码很奇怪，因为您没有将数据作为 Prop 传递。

所以毫无疑问，什么也没有出现。

您必须将数据收集传递给图表组件。

<chart :data="datacollection" />

请记住，如果您使用 API，您的数据将异步到达。因此，组件已安装，渲染图表，但您的数据不在那里。因此，您需要添加一个 v-if 来确保您的 api 调用已完成。