CODEWITHSUNDEEP
vue.jsvuejs2chart.jsvue-chartjs
MounirOnGithub
MounirOnGithub

Reputation: 699

vue-chartjs load data from parent component

I have a component for a LineChart, here is the code :

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

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

I want to use this component in another one as I can affect data to data and options value of the component Chart.vue.

I'm new to VueJS and can't understand an example like that in vue-chartjs doc.

Here is my component that will be the parent one, and what I've done from now : 

<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>

Upvotes: 2

Views: 1292

Answers (1)

Jakub Juszczak
Jakub Juszczak

Reputation: 7827

Where does your data come from? Your example code is weird, as you are not passing your data as props.

So no wonder, that nothing shows up.

You have to pass your datacollection to your chart component.

<chart :data="datacollection" />

And keep in mind, that if you are using an API your data will arrive async. So the component mounts, renders the chart but your data is not there. So you need to add a v-if to be sure that your api call is finished.

Upvotes: 4

Related Questions