使用 VueJS 将标题传递给 gchart

Question

我正在尝试使用 vue-google-chart 库来绘制图表。

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

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

将其定义为 prop 并将 chartOptions 定义为计算属性，它将 prop 标题作为 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;
        }
   }
}
});

使用 VueJS 将标题传递给 gchart

Pass title to gchart with VueJS

gchart

vue.js