最近在做一个vue项目,用的是官方推荐的axios请求数据,数据结构是一级对象嵌套二级对象,发现一级对象数据渲染不报错,二级数据渲染报错。很是郁闷!data函数如下

 export default {
        name: 'hello',
        data() {
            return {
                card:{} 

            }
        }
     }

返回的数据如下:

{
    "object":{
        "subObject":"123",
        ...
    }
}

报错的原因是在data函数return的card里没有二级对象.所以会报错;
解决办法是:

 export default {
        name: 'detail',
        data() {
            return {
                loading: false,
                card:{},
            }
        },
        created() {
            this.fetchData();
        },
         methods: {
            fetchData() {
            this.loading = true;
            let that=this;
             this.ajax.get(url, {  params: { id: "yourId" } })
                    .then(function (response) {
                        that.loading = false;
                    }, function (error) {
                        console.log(error);
                    })

            }
        }

然后在html中加上下面这句:

<template>
    <div v-if="!loading">
    <!----你的html代码------>
    </div>
</template>

然后就不会报错了!希望对你有帮助!~溜了~~~

Logo

前往低代码交流专区

更多推荐