vue 出现 undefined

Question

数据是这样的

{
    "id" : 1,
    "name" : "testName",
     "info" : {
         "face" : "xxxxxxx,jpg"
         "mobile" : "xxxxxx"
     }
}

在模板中

{{user.info.mobile}} //这样就报错undefined

只能写成

{{user.info ? user.info.face: ''}}
{{user.info ? user.info.mobile : ''}}  //这样就没毛病了

这样写好麻烦啊 有其他办法吗?

Answer 1

出现这个原因，是因为请求是异步的吧
要么，数据初始化，data的

return{
    {
    "id" : "",
    "name" : "",
     "info" : {
         "face" : ""
         "mobile" : ""
     }
    }
} 

里面定义个初始化内容,要么在template模版里面 v-if，数据拿到再渲染
第一种会闪一下空，然后数据再渲染，第二种是完全等数据下来再渲染

Answer 2

没有太好的办法吧，你可以写一下方法单独处理这一块的逻辑，封装一下

Answer 3

貌似不支持这种多级对象，
created函数 里面重新赋值下
this.info = this.user.info
html:
{{info.name}}

Answer 4

模板渲染时还没有数据，一般解决办法就是在这个dom上加个v-if，反正data是响应式的

Answer 5

请求是异步的,需要在页面的data里做数据初始化