如何让 vue 组件等到数据准备好渲染? [英] How to let vue component wait until the data is ready for render?

问题描述

vue 组件使用 axios get 不会等待控制器的数据，它会提示错误:

index.vue?d4c7:200 Uncaught (in promise) TypeError: Cannot read property 'ftth' of undefined

我的代码如下:

<模板><div class="dashboard-editor-container"><el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;"><折线图 :chart-data="lineChartData"/></el-row></div></模板><脚本>从 './components/LineChart' 导入 LineChart；从'axios'导入axios；常量 lineChartData = {全部: {FTTH数据:[]，VDSL数据:[]，ADSL数据:[]，},};导出默认{名称:'仪表板'，组件: {折线图，},数据() {返回 {lineChartData:lineChartData.all，};},创建(){this.getData();},方法: {处理集线图数据(类型){this.lineChartData = lineChartData[类型];},异步 getData() {axios.get('/api/data_graphs').then(响应 => {控制台.log(response.data);var 数据 = 响应数据；变量 i = 0;for (i = Object.keys(data).length - 1; i >= 0; i--) {lineChartData.all.FTTHData.push(data[i]['f​​tth']);lineChartData.all.VDSLData.push(data[i]['vdsl']);lineChartData.all.ADSLData.push(data[i]['adsl']);}});},},};</脚本>

<块引用>

我必须使用watch方法吗?

解决方案

首先，因为你有这样一个嵌套的数据结构，你需要一个计算属性来返回数据是否加载.通常，您可以在模板中执行此检查.

计算:{isDataLoaded() {const nestedLoaded = Object.keys(this.lineChartData).map(key => this.lineChartData[key].length !== 0)返回 this.lineChartData &&nestedLoaded.length !== 0}}

您可以使用 v-if="isDataLoaded" 隐藏元素，直到数据加载完毕.

vue component won't wait for data from controller using axios get, it prompt error:

index.vue?d4c7:200 Uncaught (in promise) TypeError: Cannot read property 'ftth' of undefined

my code are below:

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

Do I have to use watch method?

解决方案

First, because you have such a nested data structure you'll want a computed property to return whether the data is loaded or not. Normally, you could do this check in the template.

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

You can use v-if="isDataLoaded" to hide the element until the data has been loaded.

这篇关于如何让 vue 组件等到数据准备好渲染?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！