【发布时间】：2019-04-27 21:08:06
【问题描述】：
您好社区再次回复您。我正在使用 openweather API，并且正在构建一个简单的天气应用程序。我有一个问题，我无法显示每个城市的天气状况图标。
我将每个图标 id 推送到 newArray 中，并尝试使用 url 显示它，但没有运气http://openweathermap.org/img/w/10d.png
有什么建议吗？提前致谢
var app = new Vue({
el: "#app",
data: {
test: [],
image: [],
newArray:[],
message: "",
url: "",
},
created: function () {
this.getData();
this.cities();
},
methods: {
getData: function () {
var fetchConfig =
fetch("https://api.myjson.com/bins/i8run", {
method: "GET",
headers: new Headers({})
}).then(function (response) {
if (response.ok) {
return response.json();
}
}).then(function (json) {
console.log("My json", json)
app.test = json.list;
console.log(app.test);
app.pushAnArr();
})
.catch(function (error) {
console.log(error);
})
},
cities: function () {
var fetchConfig =
fetch("https://pixabay.com/api/?key=10772849-8270b213e517e422b036ea0fd&q=city", {
method: "GET",
headers: new Headers({})
}).then(function (response) {
if (response.ok) {
return response.json();
}
}).then(function (json) {
console.log("My json", json)
app.image = json.hits;
console.log(app.image);
})
.catch(function (error) {
console.log(error);
})
},
pushAnArr: function(){
for(var i=0; i<app.test.length; i++){
app.newArray.push(app.test[i].weather[0].icon);
}
console.log(app.newArray);
}
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app">
<div v-for="item in newArray" :key="item.id" class="thecard">
{{item}}
<img src="http://openweathermap.org/img/w/item.png" >
</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>【问题讨论】：
-
您每次都使用静态 URL
http://openweathermap.org/img/w/item.png。也许你想把你的{{item}}占位符也放在那里……？ -
你肯定是想显示 src="openweathermap.org/img/w/item.png"，不是吗？
标签： javascript html api vue.js weather