vue-chartjs从父组件加载数据

Question

我有一个LineChart的组件，代码如下：

<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

您的数据从何而来？您的示例代码很奇怪，因为您没有将数据作为道具进行传递。

所以难怪，什么都没有出现。

您必须将datacollection传递给图表组件。

<chart :data="datacollection" />

请记住，如果您使用的是API，那么您的数据将异步到达。因此，组件挂载，呈现图表，但您的数据不在那里。因此，您需要添加一个v-if，以确保您的api调用已完成。