Pass title to gchart with VueJS

Question

I'm trying to use vue-google-chart library to draw graphs.

I'm using the following code for the component:

Vue.component('graph', {
template: '<GChart type="AreaChart" :data="chartData" :options="chartOptions"/>',
props: ['data', 'options'],
data() {
   return {
     chartData: null,
     chartOptions: {
        title: '',
        curveType: 'function',
        height: 500,
        pointSize: 10,
      }
   }
},

watch: {
   data: {
     immediate: false,
     handler(newValue) {
        this.chartData = newValue;
        }
   }
}
});

When creating the component in html, I use:

<graph :data="datag"></graph>

How do I pass the title as argument when creating the component in html to update the default empty title defined in the component?

Thanks in advance!

score 1 · Accepted Answer · answered Jan 16 '22 at 13:37

define it as prop and define chartOptions as computed property which takes the prop title as value of title field :

<graph :data="datag" title="the chart title"></graph>

the component :

Vue.component('graph', {
template: '<GChart type="AreaChart" :data="chartData" :options="chartOptions"/>',
props: ['data', 'options','title'],
data() {
   return {
     chartData: null,
      
   }
},
computed:{
  chartOptions(){
    return {
        title: this.title,
        curveType: 'function',
        height: 500,
        pointSize: 10,
      }
  }
},
watch: {
   data: {
     immediate: false,
     handler(newValue) {
        this.chartData = newValue;
        }
   }
}
});

Pass title to gchart with VueJS

1 Answers1