Error Getting JSON Property In Vue Js

I have encountered a strange behavior with Vue. I make an ajax call store the result (some JSON) to a Vue data property named: 'modello'. { 'lineaGialla': { 'selected': false

Solution 1:

The problem here is data is retrieved asynchronously, meaning your data is not there when Vue first renders the template. Here is the sequence of events:

1. The created lifecycle event is called
2. You make a request to the server for data
3. Vue lifecycle completes and Vue is first rendered with no data
4. Your ajax call for data completes
5. Vue re-renders

The problem here is step number 3. When you try to access the descrizione property in your template

{{modello.lineaGialla.descrizione}}

lineaGialla is undefined because the data is not yet retrieved from the server. So, in essence you are trying to read the descrizione of undefined and that is a javascript error.

What you should do check to make sure you have data before you try to access properties on data that may not be populated immediately.

{{modello.lineaGialla && modello.lineaGialla.descrizione}}

Alternately, if this interpolation is in some element, you can prevent the element from rendering until there is data.

<div v-if="modello.lineaGialla">
    {{modello.lineaGialla.descrizione}}
</div>

What both of these are doing is checking to make sure that lineaGialla is a non falsy value. If it is, then it renders the data.

The reason you are OK when you render {{modello.lineaGialla}} is because Vue will just render nothing. The problem is when you try to access a property of an undefined value. That will blow up every time.