Vuejs - cannot create undefined property - (but it displays in browser)

Question

I have such weird behavior on Vue. I am trying to display an attached property of an object with a name descrizioneand it works! But in the console, I have a warning from Vue:

TypeError: cannot read descrizione property from undefined "

Here is my code:

HTML

<div id="input-container">
  {{modello.lineaGialla.descrizione}}
  <input 
     class="styled-checkbox"
     type="checkbox"
     v-for="(servizio, index) in modello.lineaGialla.servizi" 
     v-bind:style="{left:servizio.x+'px',top:servizio.y+'px'}"
     v-model="servizio.selected"
     v-on:click="AddServizi(servizio.selected,servizio.nomeServizio)"
     />
  <br/>
  {{modello.lineaBlu.descrizione}}
  <input 
     class=""
     type="checkbox"
     v-for="(servizio, index) in modello.lineaBlu.servizi" 
     v-model="servizio.selected"
     v-on:click="AddServizi(servizio.selected,servizio.nomeServizio)"
     />
</div>

Json

{
"lineaGialla": {
  "class":"gialla", 
  "selected": false,
  "descrizione": "Questa è linea gialla",
  "descrizione_breve":"descrizione breve gialla",
  "descrizione_lunga":"descrizione lunga gialla",
  "servizi": [
      {"nomeServizio":"servizio_giallo1","descrizione":"qui desc <br/> breve","descrizione_lunga":"qui desc lunga","x":534,"y":83,"selected": false},
      {"nomeServizio":"servizio_giallo2","descrizione":"qui desc <br/> breve","descrizione_lunga":"qui desc lunga","x":399,"y":259,"selected": false},
      {"nomeServizio":"servizio_giallo3","descrizione":"qui desc <br/> breve","descrizione_lunga":"qui desc lunga","x":224,"y":262,"selected": false},
      {"nomeServizio":"servizio_giallo4","descrizione":"qui desc <br/> breve","descrizione_lunga":"qui desc lunga","x":150,"y":502,"selected": false}
  ]
},
"lineaBlu": {
  "class":"blu",    
  "selected": false,
  "descrizione": "Questa è la linea blu",
  "descrizione_breve":"descrizione breve blu",
  "descrizione_lunga":"descrizione lunga blu",
  "servizi": [
      {"nomeServizio":"servizio_blu1","descrizione":"qui desc <br/> breve","descrizione_lunga":"qui desc lunga","x":534,"y":83,"selected": false},
      {"nomeServizio":"servizio_blu2","descrizione":"qui desc <br/> breve","descrizione_lunga":"qui desc lunga","x":399,"y":259,"selected": false},
      {"nomeServizio":"servizio_blu3","descrizione":"qui desc <br/> breve","descrizione_lunga":"qui desc lunga","x":224,"y":262,"selected": false},
      {"nomeServizio":"servizio_blu4","descrizione":"qui desc <br/> breve","descrizione_lunga":"qui desc lunga","x":150,"y":502,"selected": false}
  ]
}

JS Here I use the self invoked function to call ajax:

var Callmodule = (function(){
var urljsonEntrata= "modello.json";

function getmodules(){
    var req = $.ajax({
        url: urljsonEntrata,
        dataType: 'json',
        type: 'GET'
    });

    req.done(function(data){
        console.log('ajax to '+urljsonEntrata+' DONE');
        console.log(data);
        console.log('-----------------------------');
    });

    req.fail(function( jqXHR, textStatus, errorThrown ) {
        console.log('ajax to '+urljsonEntrata+' FAIL');
        console.log(jqXHR);
        console.log(textStatus);
        console.log(errorThrown);
        console.log('-----------------------------');
    });
    return req;
}
return {
    callGetmodules : getmodules(),
}
})();



var modello = {};

var VueApp = (function(){

 //VUE JS
var Metromappa = new Vue({
 el: '#metromappa',
  data: {
    modello:modello
  },
  methods:{
    getModuleData : function(){             
       var req = Callmodule.callGetmodules;
       var self = this;
       req.done(function(data){
         self.modello=data;
       });
       req.fail(function(jqXHR,textStatus,errorThrown){
        console.log('richiesta andata a male')
       });  
   }  

I'll go crazy.

Answer 1

The problem is that you are retrieving data asynchronously, but you have defined the template so that it expects the data to be filled immediately.

, .

modello.lineaGialla.descrizione

, , lineaGialla undefined. descrizione , undefined . .

, , ,

<div  v-if="modello.lineaGialla && modello.lineaBlu" id="input-container">

:

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