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

Posted 2023-02-22

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

【英文标题】：Vuejs - cannot ready property of undefined - (but it render on browser)

【发布时间】：2017-12-13 10:44:03

【问题描述】：

我在 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')
       );  
     

我要疯了。

【问题讨论】：

什么时候调用getModuleData？

@MarkM 他实际上在这里称它为：callGetmodules : getmodules()。这不是你通常会这样做的方式，但它看起来确实会按照它的编码方式工作。

【参考方案1】：

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

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

modello.lineaGialla.descrizione

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

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

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

或像这样保护访问：

modello.lineaGialla && modello.lineaGialla.descrizione

【讨论】：

对我有帮助