我有一个名为的模板Report.vue
,在该模板中我还有一个data()
名为 的属性dataSent:[]
。在所述模板中,我调用了组件BarChart
,我试图将dataSent
具有更新元素的数组传递dataSent[1,2,3,4,5...]
给组件(条形图),以便它可以显示图形。但是,当我将 console.log 添加到 BarChart 时,它永远不会收到更新的道具。我怀疑它以某种方式与事件有关,但由于我是新手,还没有完全理解它是如何工作的,想知道我是否可以得到一些帮助
由于 dataSent:[] 被初始化为一个空数组,因此 BarChart 组件从一开始就没有显示任何内容是有道理的,但是随后,我创建了一个方法(在方法部分),称为 updateData(),它显式用 [12, 19, 3, 5, 2,8] 填充 dataSent。当然,我正在使用绑定到绑定到dataSent
数组的组件条形图(这个称为数据)的道具。最后,在 html 部分,一个@input
名为 GPSelect 的组件中的事件被认为是触发更改(更新 dataSent 数组),但是,如前所述,确实发生在父级(Report.vue)中,而不是在子级中组件(条形图)。
报告.vue
<v-flex lg4 sm12 xs12>
<div class="selectOptions">
<GPSelect
@input="listSessions"
v-model="programSelected"
:items="programs"
label="Programs"
:disabled="programs === undefined || programs.length === 0"
/>
</div>
</v-flex>
<BarChart
:label="label"
:data="dataSent"
:labels="labels"
/>
data() {
return {
treatments: [],
programs: [],
programSelected: "",
dataSent: [],
label: "Number of sessions",
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']
}
},
methods: {
async listSessions() {
/*...some other sentences irrelevant */
this.updateData();
},
updateData() {
this.dataSent=[12, 19, 3, 5, 2,8];
return this.dataSent;
},
BarChart.vue
<template>
<div class="chart-container">
<canvas id="barChart" ref="barChart">
</canvas>
</div>
</template>
<script>
import Chart from "chart.js";
export default {
props: {
labels: Array,
colors: Array,
data: Array,
label: ""
},
mounted() {
this.displayChart();
},
methods: {
displayChart() {
console.log(this.data);
}
}
this.data
我希望来自 Barchart 的 console.log 显示从父组件 Report.vue 发送的更新数组(接收到的),但目前,它显示[__ob__: Observer]