如何解决我无法显示气象图标
我正在使用 Openweather API 创建时间应用程序。我尝试显示与所选城市和气象状态对应的气象图标。
我的代码如下:
HTML:
<div class="column">
<div class="media-content">
<div class="content">
<p>
<strong>
<h1 class="has-text-inf o"> {{ ciutatActual.weather[0].icon }} </h1>
</strong>
</p>
</div>
</div>
</div>
javascript:
var vm = new Vue({
el: '#eltemps',data: {
selectedCity: "",ciutatActual: null,ciutats: [
"Barcelona","Lleida","Zaragoza","Sevilla","Madrid","Paris","Melbourne","Moscow","Pekin","Marrakech"]
},created: function () {
this.selectedCity = this.ciutats[0]
},watch: {
selectedCity: function (){
this.getWeather(this.selectedCity)
}
},methods: {
getWeather(city) {
const url = 'https://api.openweathermap.org/data/2.5/weather?q=' + city + '&units=metric&lang=ca&appid=8660dddfbe5f16ee37dbd6883d8f07d5';
fetch(url)
.then(function (response) {
return response.json()
})
.then(function (item) {
vm.ciutatActual = item;
})
.catch(function(error) {
console.log(error);
})
},itemClicked: function(item) {
this.getWeather();
this.onClick(item);
}
}
})
裁决来自这里:{{ciutatactual.weather [0] .icon}}
它没有显示图标,而是只显示一个代码
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。