vue 变量问题

Question

描述
在vue-cli中，数据格式：

data(){
    userInof: ''
}

axios的post请求返回数据：

res.data.data.userInfo为对象：

userInfo:{
    a: "1",
    b: "2",
    c: ''   // c变量时有时没有
}

而 <template>中有：

<div v-for="item in userInfo">
    <div>{{item.a}}</div>
    <div>{{item.b}}</div>
    <div>{{item.c}}</div>
</div>

在没有userInfo.c变量的情况下， 整个页面因报错而崩溃，
请问有没有什么好的解决办法？

Answer 1

<div v-if="item.c">{{item.c}}</div>

Answer 2

默认给一个空对象就行了

data(){
    userInfo: {}
}

Answer 3

这里返回的userInfo不是个数组，去掉v-for,在div里直接使用{{userInfo.a}}{{userInfo.b}}{{userInfo.c}}代替{{item.a}}{{item.b}}{{item.c}}

Answer 4

你要先有userInfo这个对象才能在页面结构里正确渲染，否则是找不到这个userInfo的，这样写就没问题啦

<div v-if="userInfo">
    <div v-for="item in userInfo">
        <div>{{item.a}}</div>
        <div>{{item.b}}</div>
        <div>{{item.c}}</div>
     </div>
 </div>