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 doc中无法理解这样的例子。

这是我的组件，它是父组件，以及我从现在开始做的事情：

<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调用已完成。

vue-chartjs从父组件加载数据

1 个答案: