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!
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;
}
}
}
});