Как позволить компоненту vue ждать, пока данные не будут готовы для рендеринга? - PullRequest
Новая
       14

Как позволить компоненту vue ждать, пока данные не будут готовы для рендеринга?

0 голосов
/ 24 апреля 2020

vue компонент не будет ждать данных от контроллера, используя ax ios get, он выдает ошибку:

index. vue? D4c7: 200 Uncaught (в обещании) TypeError: Не удается прочитать свойство 'ftth' из неопределенного

мой код ниже: 

<template>
    <div class="dashboard-editor-container">
        <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
            <line-chart :chart-data="lineChartData"/>
        </el-row>
    </div>
</template>

<script>
    import LineChart from './components/LineChart';
    import axios from 'axios';

    const lineChartData = {
        all: {
            FTTHData: [],
            VDSLData: [],
            ADSLData: [],
        },
    };
    export default {
        name: 'Dashboard',
        components: {
            LineChart,
        },
        data() {
            return {
                lineChartData: lineChartData.all,
            };
        },
        created() {
            this.getData();
        },
        methods: {
            handleSetLineChartData(type) {
                this.lineChartData = lineChartData[type];
            },
            async getData() {
                axios
                    .get('/api/data_graphs')
                    .then(response => {
                        console.log(response.data);
                        var data = response.data;
                        var i = 0;
                        for (i = Object.keys(data).length - 1; i >= 0; i--) {
                            lineChartData.all.FTTHData.push(data[i]['ftth']);
                            lineChartData.all.VDSLData.push(data[i]['vdsl']);
                            lineChartData.all.ADSLData.push(data[i]['adsl']);
                        }
                    });
            },
        },
    };
</script>

Нужно ли использовать метод наблюдения?

Ответы [ 3 ]

1 голос
/ 24 апреля 2020

Для среднего времени:

Использовать установленный Ax ios Тайм-аут 5000 мс 

axios
.get('/api/data_graphs', { timeout: 5000 })
.then(response => {
  console.log(response.data);
  var data = response.data;
  var i = 0;
  for (i = Object.keys(data).length - 1; i >= 0; i--) {
    lineChartData.all.FTTHData.push(data[i]['ftth']);
    lineChartData.all.VDSLData.push(data[i]['vdsl']);
    lineChartData.all.ADSLData.push(data[i]['adsl']);
  }
  this.lineChartIsLoaded = true;
});

Использовать v-if в vue компонент 

<line-chart v-if="lineChartIsLoaded" :chart-data="lineChartData" :date-data="dateData" />

Установить lineChartIsLoaded в false по умолчанию 

const lineChartIsLoaded = false;
1 голос
/ 24 апреля 2020

Во-первых, поскольку у вас есть такая вложенная структура данных, вы хотите, чтобы вычисляемое свойство возвращало, загружены данные или нет. Обычно вы можете сделать эту проверку в шаблоне. 

computed: {
  isDataLoaded() {
    const nestedLoaded = Object.keys(this.lineChartData).map(key => this.lineChartData[key].length !== 0)
    return this.lineChartData && nestedLoaded.length !== 0
  }
}

Вы можете использовать v-if="isDataLoaded", чтобы скрыть элемент, пока данные не будут загружены.

1 голос
/ 24 апреля 2020

Не совсем понятно, как выглядит response.data, но поскольку вы используете Object.keys, я предполагаю, что это объект.

Если вам нужно l oop поверх клавиш, при использовании числовых индексов c вы, скорее всего, не получите объект. Поэтому вам нужно получить key и индекс i и использовать это значение для доступа к объекту. Измените это: 

for (i = Object.keys(data).length - 1; i >= 0; i--) {
  lineChartData.all.FTTHData.push(data[i]['ftth']);
  lineChartData.all.VDSLData.push(data[i]['vdsl']);
  lineChartData.all.ADSLData.push(data[i]['adsl']);
}

на следующее: 

const keys = Object.keys(data)
for (i = keys.length - 1; i >= 0; i--) {
  lineChartData.all.FTTHData.push(data[keys[i]]['ftth']);
  lineChartData.all.VDSLData.push(data[keys[i]]['vdsl']);
  lineChartData.all.ADSLData.push(data[keys[i]]['adsl']);
}

Но для зацикливания ключей объекта проще использовать это: 

for (let key in data) {
  lineChartData.all.FTTHData.push(data[key]['ftth']);
  lineChartData.all.VDSLData.push(data[key]['vdsl']);
  lineChartData.all.ADSLData.push(data[key]['adsl']);
}

Альтернативный синтаксис будет кормить тебе ключи и по моему легче читать.

...