Vue Js - 无法读取未定义的属性 - （但它呈现在浏览器上）

Question

我在 Vue 上有这种奇怪的行为。 我正在尝试渲染一个名为descrizione 的对象的嵌套属性，它可以工作！但是在控制台中，我收到了来自 Vue 的警告：

TypeError: Cannot read property 'descrizione' of undefined"

这是我的代码：

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 这里我使用一个自调用函数来进行 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')
       });  
   }  

我要疯了。

Answer 1

这里的问题是您正在异步检索数据，但您已经以期望数据立即填充的方式定义了模板。

例如，在您的模板中，您有以下代码。

modello.lineaGialla.descrizione

但是，当模板第一次渲染时，lineaGialla不存在或者是undefined。但是，您正在尝试访问该值的 descrizione 属性，而 undefined 没有属性。这会导致您的错误。

为了解决这个问题，在你有数据之前不要渲染模板，

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

或像这样保护访问：

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