在Vue js中获取JSON属性时出错 [英] Error getting JSON property in Vue js
问题描述
我遇到了Vue的奇怪行为.我进行了ajax调用,将结果(一些JSON)存储到名为"modello"的Vue数据属性中.
I have encountered a strange behavior with Vue. I make an ajax call store the result (some JSON) to a Vue data property named: 'modello'.
{
"lineaGialla": {
"selected": false,
"descrizione": "Questa è la descrizione della linea gialla",
"servizi": [
{"nomeServizio": "servizio1","descrizione":"descrizione servizio1","selected": false},
{"nomeServizio": "servizio2","descrizione":"descrizione servizio2","selected": false},
{"nomeServizio": "servizio3","descrizione":"descrizione servizio3","selected": false}
]
}
}
在模板中,当我使用{{modello.lineaGialla}}
访问数据属性lineaGialla
时,它可以工作,但是当我尝试访问诸如{{modello.lineaGialla.descrizione}}
之类的嵌套属性时,在控制台中出现错误:
In the template, when I access the data property lineaGialla
using {{modello.lineaGialla}}
it works, but when I try to access a nested property, such as {{modello.lineaGialla.descrizione}}
, I get an error in the console:
[Vue警告]:渲染功能出错:"TypeError:无法读取未定义的属性'descrizione'"
[Vue warn]: Error in render function: "TypeError: Cannot read property 'descrizione' of undefined"
这里是ajax调用.
var getData = function(){
return new Promise(function(resolve, reject){
$.ajax({
type:'get',
url:'https://api.myjson.com/bins/w9xlb',
dataType: 'json',
success: function(response){
resolve(response);
}
});
});
};
这是我的Vue.
var Metromappa = new Vue({
el: '#metromappa',
data: {
modello:{}
},
methods:{
},
mounted: function(){
var self = this;
getData().then(function(response){
self.modello = response;
}, function(error){
console.log(error);
});
}
})
那会是什么?
推荐答案
这里的问题是数据是异步检索的,这意味着当Vue首次渲染模板时,您的数据不存在.这是事件的顺序:
The problem here is data is retrieved asynchronously, meaning your data is not there when Vue first renders the template. Here is the sequence of events:
-
created
生命周期事件称为 - 您向服务器请求数据
- Vue生命周期完成并且Vue是 first 无数据渲染
- 您对数据的ajax调用完成
- Vue重新提供
- The
created
lifecycle event is called - You make a request to the server for data
- Vue lifecycle completes and Vue is first rendered with no data
- Your ajax call for data completes
- Vue re-renders
这里的问题是步骤3.当您尝试访问模板中的descrizione
属性
The problem here is step number 3. When you try to access the descrizione
property in your template
{{modello.lineaGialla.descrizione}}
lineaGialla
为undefined
,因为尚未从服务器检索数据.因此,从本质上讲,您正在尝试阅读undefined
的descrizione
,这是一个JavaScript错误.
lineaGialla
is undefined
because the data is not yet retrieved from the server. So, in essence you are trying to read the descrizione
of undefined
and that is a javascript error.
在尝试访问可能不会立即填充的数据的属性之前,应做哪些检查以确保您拥有 数据.
What you should do check to make sure you have data before you try to access properties on data that may not be populated immediately.
{{modello.lineaGialla && modello.lineaGialla.descrizione}}
或者,如果此插值在某个元素中,则可以阻止该元素渲染,直到有数据为止.
Alternately, if this interpolation is in some element, you can prevent the element from rendering until there is data.
<div v-if="modello.lineaGialla">
{{modello.lineaGialla.descrizione}}
</div>
What both of these are doing is checking to make sure that lineaGialla
is a non falsy value. If it is, then it renders the data.
渲染{{modello.lineaGialla}}
时您还可以的原因是,Vue不会渲染任何内容.问题是当您尝试访问一个undefined
值的属性时.每次都会炸毁.
The reason you are OK when you render {{modello.lineaGialla}}
is because Vue will just render nothing. The problem is when you try to access a property of an undefined
value. That will blow up every time.
这篇关于在Vue js中获取JSON属性时出错的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!