vue在数据没有请求回来的时候，不渲染页面

Question

vue在数据没有请求回来的时候，渲染了一次无数据页面，所有值都是undefined，当数据请求回来之后，又渲染了一次有数据的页面，请问如何让页面没有数据不渲染

Answer 1

给那些要渲染到页面上的数据，赋值一个默认值就行了，比如空或者占位符'-'。请求成功后再赋值为请求回来的值。这样是没有数据的时候还渲染页面，只不过不会出现undefined的情况。

<template>
    <div>{{ user.name }}</div>
</template>

export default {
    data(){
        return {
            user: { name: '-' }
        }
    },
    mounted(){
       axios.get(/api).then(res => {
            this.user = res.data.user
       })
    }
}

另一种，就是在每个数据渲染的地方去做兼容

<template>
    <div>{{ user.name || '' }}</div>
</template>

Answer 2

使用v-if

Answer 3

加入loading ，在ajax请求方法里做数据判断