My experience with Vue has been quite puzzling. I've encountered an issue while trying to render a nested property of an object called descrizione, and although it does work, I keep receiving a warning from Vue in the console:
TypeError: Cannot read property 'descrizione' of undefined"
Let me share the code snippet that's causing this dilemma:
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 I've enlisted the help of a self-invoked function for making 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')
});
}
This whole situation is truly befuddling.