我扩展了我学习VueJs的知识,并且出于学习的原因,我正在尝试使用axios库来获取JSON信息。 问题是在HTML中显示一个对象。在控制台中打印所有内容都可以正常工作,除了HTML。
当我加载页面时,它什么都不显示,而在控制台中则显示所有结果。
HTML文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>VueJs</title>
</head>
<body>
<div class="innerBody" id="app">
<p style="width: 100%; height: 40px; background: gray;">{{getDescription}}</p>
</div>
<script src="app.js"></script>
</body>
</html>
JS档案:
new Vue({
el: '#app',
data:{
dataReceived: [],
errorReceived: [],
description: '',
},
methods: {
getJson: function(city){
axios.get('https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22'+city+'%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys')
.then(function (response) {
dataReceived = response;
console.log(dataReceived);
return dataReceived;
})
.catch(function (error) {
errorReceived = error;
console.log(errorReceived);
return errorReceived;
});
},
getDescription: function(){
description = dataReceived.data.query.results.channel.title;
console.log(description);
return description;
}
},
beforeMount(){
this.getJson('boston');
}
});
提前谢谢。
答案 0 :(得分:3)
您的代码存在一些问题......
您的响应处理程序未设置Vue实例的数据字段。例如,在以下代码中。 dataReceived
未引用您的Vue对象的dataReceived
,这需要this.dataReceived
。
axios.get('...')
.then(function (response) {
dataReceived = response; // <-- should be: this.dataReceived
console.log(dataReceived);
return dataReceived;
})
您可以使用ES2015 arrow-function将this
绑定到Vue实例,然后调用this.dataReceived = response
。
axios.get('...')
.then((response) => {
this.dataReceived = response;
console.log(dataReceived);
})
您的模板尝试将getDescription
函数绑定到<div>
的文本内容{{getDescription}}
,但正确的语法是{{getDescription()}}
(请注意括号)。
<div id="app">{{getDescription()}}</div>
但是,由于getDescription
中使用的数据在AJAX响应返回之前不可用,因此绑定实际上应该是新接收的数据更新的内容。例如,该绑定可以是由AJAX响应处理程序设置的数据字段(例如,名为title
)。
new Vue({
...
data() {
return {
dataReceived: {},
title: ''
}
},
methods: {
getsJon() {
axios.get('...')
.then((response) => {
this.dataReceived = response;
this.title = parseTitle(this.dataReceived);
});
},
parseTitle(data) {
return /* ... */;
}
}
});
// HTML
<div id="app">{{title}}</div>
答案 1 :(得分:0)
要访问数据选项中的属性,您需要使用this
关键字,类似于您访问getJson
方法的方式。
例如,要访问AJAX调用的dataReceived
中的.then
变量,您需要调整以下内容:
axios.get('your-url')
.then(function (response) {
this.dataReceived = response;
console.log(this.dataReceived);
return this.dataReceived;
})
使用this
访问任何其他组件选项(数据值,计算值,方法等)
答案 2 :(得分:0)
将绑定更改为{{dataReceived}}并像这样更新您的Vue实例
new Vue({
el: "#app",
data: {
dataReceived: [],
errorReceived: [],
description: ""
},
methods: {
getJson: function(city) {
axios
.get(
"https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22" +
city +
"%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys"
)
.then(response => {
this.dataReceived = response;
console.log(this.dataReceived);
})
.catch(error => {
this.errorReceived = error;
console.log(this.errorReceived);
});
},
getDescription: function() {
this.description = this.dataReceived.data.query.results.channel.title;
console.log(this.description);
}
},
mounted: function() {
this.getJson("boston");
}
});
正如其他响应所指出的那样,Vue中的变量始终是Vue实例的子项,应使用this.varName进行设置。此外,绑定到异步调用的响应只会给你立即返回,这将(我相信)是一个承诺。欢迎来到Vue,它太棒了!
编辑:我使用mounted
代替beforeMount
只是个人选择,因为我写这篇文章时,它应该仍然有效。