Undefined appears in vue

the data is like this

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

in the template

{{user.info.mobile}} //undefined

can only be written as

{{user.info ? user.info.face: ""}}
{{user.info ? user.info.mobile : ""}}  //

it"s troublesome to write like this. Is there any other way?

Aug.09,2021

there is no good way, can you write the logic that the method handles this piece separately, encapsulate


the reason for this is that the request is asynchronous
or data initialization, data

return{
    {
    "id" : "",
    "name" : "",
     "info" : {
         "face" : ""
         "mobile" : ""
     }
    }
} 
Define an initialization content in

. Either you can render the data in the template template
after getting the data.

the first one will flash empty, and then the data will be rendered again. The second is to completely wait for the data to come down and then render

.

does not seem to support this kind of multi-level object. The
this.info = this.user.info
html:
{{info.name}}


template does not have data when rendering in the
created function. The general solution is to add a data to this dom. Anyway, the data is responsive


request is asynchronous, and you need to initialize the data in the data of the page.

Menu