vue.js - vue通过axios取值，页面正常显示但控制台报错。

问题描述

问 题

在组件中使用正常的{{}}取值，页面mounted时用axios请求的数据，页面也能正常渲染出来，但控制台出现了下面的报错信息。

我猜测是因为声明周期的问题，在页面被渲染之后，异步请求数据才完成，所以页面被渲染一次后，数据才请求回来，页面才被填充。所以出现了页面正常显示，但控制台报错。我试着把请求数据的方法放到beforeMount,created这几个阶段，这个错误依然存在。

html中的代码：

    <div class="news">
        <div class="sec_title">
            <h4>{{tzgg[0].title}}</h4>
        </div>
        <div class="news_text">
            <p>{{tzgg[0].abstractContent}}
<span class="xiangqing fr">【<a href="/index/catetory/aaa/article/bbb">详情</a>】</span>
            </p>
        </div>
    </div>

js中的代码：

export default{
    data : function(){
        return {
            tzgg : []
        }
    },
    methods: {
        getTZGG : function(){
            var _this = this;
            this.$http.get('/src/data/catetory.data').then(function(res){
                _this.tzgg = res.data;
            }).catch(function(err){
                console.log('获取通知公告数据出错');
            })
        }
    },
    mounted : function(){
        this.getTZGG();
    },
    components : {
        carousel : Carousel
    },
};

报错信息：

全部代码在：https://github.com/EaVanCN/vu...

解决方案

因为你 tzgg 初始值是一个空数组, tzgg[0] 是 undefined, 如果你再在 undefined 里面取东西当然会报错了, 你这样改一下就可以了

    <div class="news">
        <div class="sec_title">
            <h4>{{ tzgg[0] && tzgg[0].title }}</h4>
        </div>
        <div class="news_text">
            <p>{{ tzgg[0] && tzgg[0].abstractContent }}
<span class="xiangqing fr">【<a href="/index/catetory/aaa/article/bbb">详情</a>】</span>
            </p>
        </div>
    </div>

这篇关于vue.js - vue通过axios取值，页面正常显示但控制台报错。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！