Vuejs - cannot ready property of undefined - (but it render on browser)

Viewed 3569

I have this strange behavior on Vue. I'm trying to render a nested property of an object, named descrizione and it works! But in the console I have a warning from Vue:

TypeError: Cannot read property 'descrizione' of 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 a self invoked function to make an ajax call:

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'm going crazy.

1 Answers
Related