vue.js - 使用 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;
        }
   }
}
});