2

我有一个 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>
4

1 回答 1

4

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

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

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

<chart :data="datacollection" />

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

于 2018-01-02T07:38:10.953 回答