在父组件中更新数据后,子组件未从父组件接收道具
Child component not receiving props from parent after data is updated in parent
我有一个名为 Report.vue
的模板,在该模板中我还有一个名为 dataSent:[]
的 data()
属性。在上述模板中,我调用了组件 BarChart
,我试图将包含 dataSent[1,2,3,4,5...]
等更新元素的 dataSent
数组传递给组件 (BarChart),以便它可以显示图形。但是,当我将 console.log 添加到 BarChart 时,它永远不会收到更新的道具。我怀疑它与事件有某种关系,但由于我是新手,还没有完全理解它是如何工作的,想知道我是否能得到一些帮助
由于 dataSent:[] 被初始化为一个空数组,因此 BarChart 组件从一开始就没有显示任何内容,但是后来,我创建了一个方法(在方法部分),称为 updateData (),它显式地用 [12, 19, 3, 5, 2,8] 填充 dataSent。当然,我正在使用绑定到绑定到 dataSent
数组的组件条形图(这个称为数据)的道具。最后,在 html 部分,一个名为 GPSelect 的组件中的 @input
事件是它应该触发更改(更新 dataSent 数组)的事件,但是,如前所述,确实发生在父级(Report.vue),但不在子组件 (BarChart) 中。
Report.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);
}
}
我希望 Barchart 的 console.log 显示从父组件 Report.vue 发送的更新后的数组(收到的 this.data
),但目前它显示 [__ob__: Observer]
BarChart.vue
<template>
<div class="chart-container">
<canvas id="barChart" ref="barChart" />
</div>
</template>
<script>
import Chart from "chart.js";
export default {
props: {
labels: Array,
colors: Array,
data: Array,
label: ""
},
mounted() {
this.displayChart();
},
watch: {
'data': 'displayChart'
},
methods: {
displayChart() {
console.log(this.data);
}
}
}
试试这个:))
我有一个名为 Report.vue
的模板,在该模板中我还有一个名为 dataSent:[]
的 data()
属性。在上述模板中,我调用了组件 BarChart
,我试图将包含 dataSent[1,2,3,4,5...]
等更新元素的 dataSent
数组传递给组件 (BarChart),以便它可以显示图形。但是,当我将 console.log 添加到 BarChart 时,它永远不会收到更新的道具。我怀疑它与事件有某种关系,但由于我是新手,还没有完全理解它是如何工作的,想知道我是否能得到一些帮助
由于 dataSent:[] 被初始化为一个空数组,因此 BarChart 组件从一开始就没有显示任何内容,但是后来,我创建了一个方法(在方法部分),称为 updateData (),它显式地用 [12, 19, 3, 5, 2,8] 填充 dataSent。当然,我正在使用绑定到绑定到 dataSent
数组的组件条形图(这个称为数据)的道具。最后,在 html 部分,一个名为 GPSelect 的组件中的 @input
事件是它应该触发更改(更新 dataSent 数组)的事件,但是,如前所述,确实发生在父级(Report.vue),但不在子组件 (BarChart) 中。
Report.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);
}
}
我希望 Barchart 的 console.log 显示从父组件 Report.vue 发送的更新后的数组(收到的 this.data
),但目前它显示 [__ob__: Observer]
BarChart.vue
<template>
<div class="chart-container">
<canvas id="barChart" ref="barChart" />
</div>
</template>
<script>
import Chart from "chart.js";
export default {
props: {
labels: Array,
colors: Array,
data: Array,
label: ""
},
mounted() {
this.displayChart();
},
watch: {
'data': 'displayChart'
},
methods: {
displayChart() {
console.log(this.data);
}
}
}
试试这个:))