使用VueJS将标题传递给gchart

Question

我正在尝试使用vue谷歌图表库来绘制图形。

我正在为组件使用以下代码：

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

在html中创建组件时，我使用：

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

在html中创建组件以更新组件中定义的默认空标题时，如何将标题作为参数传递？

提前感谢！

Answer 1

将其定义为道具，并将chartOptions定义为计算属性，该属性将道具标题作为title字段的值：

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

组件：

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