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.

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.

• javascript
• json
• ajax
• vue.js
• vuejs2

• When is getModuleData called? – Mark Commented Jul 9, 2017 at 18:54
• 1 @MarkM he actually calls it here: callGetmodules : getmodules(). Thats not how you would typically do it, but it does look like it will work the way it's coded. – Bert Commented Jul 9, 2017 at 19:11

1 Answer 1

The problem here is that you are retrieving your data asynchronously but you have defined the template in a way that it expects the data to be populated immediately.

For example in your template you have the following code.

modello.lineaGialla.descrizione

However, when the template is first rendered, lineaGialla does not exist or is undefined. However, you are trying to access the descrizione property of that value and undefined has no properties. This results in your error.

In order to fix the problem, simply do not render the template until you have data,

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

or guard the access like this:

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