Дочерний компонент не получает реквизиты от родителя после обновления данных в родительском

У меня есть этот шаблон с именем Report.vue, и в этом шаблоне у меня также есть свойство data() с именем dataSent:[]. В указанном шаблоне я вызываю компонент BarChart, которому я пытаюсь передать массив dataSent с обновленными элементами, такими как dataSent[1,2,3,4,5...], компоненту (BarChart), чтобы он мог отображать графики. Однако, когда я добавляю console.log в BarChart, он никогда не получает обновленные реквизиты. Я подозреваю, что это как-то связано с событиями, но поскольку я новичок и до сих пор не совсем понял, как это работает, мне было интересно, могу ли я получить некоторую помощь

Поскольку dataSent: [] инициализируется пустым массивом, имеет смысл, что компонент BarChart ничего не показывает с самого начала, но затем я создал метод (в разделе методов), названный updateData (), который явно заполняет dataSent [12, 19, 3, 5, 2,8]. И, конечно же, я использую привязку props к компоненту Barchart (он называется data), который привязан к массиву dataSent. Наконец, в разделе html событие @input в компоненте с именем GPSelect - это то, что, как предполагается, запускает изменение (обновление массива 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);
}

}

Я ожидаю, что console.log от Barchart отобразит обновленный массив (полученный this.data), отправленный из родительского компонента Report.vue, но в настоящее время он показывает [__ob__: Observer]


events vue.js components updates vue-props
person gustavexx    schedule 01.08.2019    source источник
comment
Вы пробовали добавить watch на data опору в BarChart? Предоставленный вами код не регистрирует новое значение для data prop, потому что он вызывает только displayChart в mounted. Хук mounted будет вызываться только один раз при первом рендеринге компонента. watch: { data () { console.log(this.data) } }   -  person skirtle    schedule 01.08.2019

Ответы (1)


arrow_upward
0
arrow_downward

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);
    }
  }
}

Попробуй это :))

person kengres    schedule 01.08.2019
comment
Это сработало, спасибо, для других реквизитов, мне пришлось бы сделать то же самое? `watch: {'data': 'displayChart', 'label:' displayChart '....}, - person gustavexx; 01.08.2019
comment
что делает метод displayChart ()? это то, что можно вычислить? если да, то вы можете написать вычисляемое свойство. в противном случае вы должны смотреть их индивидуально - person kengres; 01.08.2019