Question

我有一个名为Report.vue的模板，在该模板中，我还有一个名为data()的{{1}}属性。在上述模板中，我调用了组件dataSent:[]，我试图将具有更新元素BarChart的{{1}}数组传递给组件（BarChart），以便它可以显示图形。但是，当我将console.log添加到BarChart时，它永远不会收到更新的道具。我怀疑它与事件有某种关系，但是由于我是新手，但仍不完全了解它的工作原理，所以想知道我是否可以得到一些帮助

由于dataSent：[]已初始化为空数组，因此BarChart组件从一开始就没有显示任何内容，但是后来，我创建了一个方法（在“方法”部分中），称为updateData（），显式使用[12，19，3，5，2,8]填充dataSent。当然，我正在使用道具绑定到绑定到dataSent数组的组件Barchart（该组件称为数据）。最后，在html部分中，假设是要触发名为GPSelect的组件中的dataSent[1,2,3,4,5...]事件，以触发更改（更新dataSent数组），但是如上所述，它确实发生在父项（Report.vue）中，但不在子组件（BarChart）中。

Report.vue

dataSent

@input

<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"       
        />

我希望Barchart的console.log能够显示从父组件Report.vue发送的更新后的数组（收到的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); } }

Answer 1

BarChart.vue

Optional<T> java.util.stream.Stream.reduce(BinaryOperator<T> accumulator)

尝试一下：））

父组件中的数据更新后，子组件未从父组件接收道具

1 个答案: