[已解决]使用Vue，axios制作了一个天气查询的小网页，初次查询数据时网页部分内容不显示

Mr.Consummate · 发表于 2021-4-10 18:52:44

本帖最后由 Mr.Consummate 于 2021-4-10 20:16 编辑

基本情况如下图所示，初次查询数据时有部分内容不显示，往后的查询均能正常显示

不显示时 js 执行好像也没有异常

有没有大佬帮忙看看应该怎么修改。。。整了一下午人麻了。。。

在线演示传送门

代码如下

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>天气查询</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<div class="weatherSearch">
<div class="inputCityName" >
<span class="in">
<input type="text" v-model="city" @keyup.enter="search" placeholder="城市名称">
</span>
<span class="btn">
<button @click="search">查询</button>
</span>
</div>
<div class="weatherData">
<div class="day0">
<div class="line1">
<span>{{yesterday.date}}</span>
</div>
<div class="line2">
<span>{{yesterday.type}}</span>
</div>
<div class="line3">
<b><span>{{yesterday.low}}</span></b>
<span v-if="yesterday.length!=0">~</span>
<b><span>{{yesterday.high}}</span></b>
</div>
<div class=line4>
<span>{{yesterday.fx}}</span>
<span>{{fengli[0]}}</span>
</div>
</div>
<div v-for="(each,index) in weatherList" v-bind:class=eachClass[index]>
<div class="line1">
<span>{{each.date}}</span>
</div>
<div class="line2">
<span>{{tianqi[index]}}</span>
</div>
<div class="line3">
<b><span>{{each.low}}</span></b>
<span>~</span>
<b><span>{{each.high}}</span></b>
</div>
<div class=line4>
<span>{{each.fengxiang}}</span>
<span>{{fengli[index+1]}}</span>
</div>
</div>
</div>
<div class="change">
<div v-for="(item,index) in riqi" v-bind:class=eachClass2[index]>
<span>{{item}}</span>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el: ".weatherSearch",
data: {
city:"",
tips:"",
fengli:[],/*对API返回的离谱格式进行处理*/
tianqi:[],/*对另一个API返回的结果进行处理以便在VUE中混用数据*/
riqi:[],/*依旧是便于引用数据*/
weatherList:[],
weatherList2:[],
yesterday:[],
todayWeather:[],
eachClass:["day1","day2","day3","day4","day5"],
eachClass2:["footer1","footer2","footer3","footer4","footer5","footer6"]
},
methods: {
search:function(){/*综合多个API接口数据*/
var weather = this;
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)/*中国天气网接口(数据更权威？)*/
.then(function (response){
console.log(response.data.data);
weather.weatherList = response.data.data.forecast;
weather.yesterday = response.data.data.yesterday;
weather.tips = response.data.data.ganmao;
console.log(weather.tips);
weather.fengli[0] = weather.yesterday["fl"].substring(9,11);
for(var i=0;i<=4;i++){
weather.fengli[i+1] = weather.weatherList[i].fengli.substring(9,11);
}
})
.catch(function (error){
console.log(error);
alert("Oops!\n请输入有效的城市名!");
return;
});
axios.get('https://www.tianqiapi.com/free/week?appid=32294657&appsecret=TLiJ1wiq',{/*天气API网站七日接口(数据更详细)*/
　　　　params:{city:weather.city}
　　})
　　.then(function (response){
weather.weatherList2 = response.data.data;
for(var i=0;i<=5;i++){
weather.tianqi[i] = weather.weatherList2[i].wea;
};
for(var t=1;t<=5;t++){
weather.riqi[t] = weather.weatherList2[t].date;
};
weather.riqi[0] = "Yesterday";
weather.riqi[1] = "Today";
console.log(response.data.data);
　　});
axios.get('https://www.tianqiapi.com/free/day?appid=32294657&appsecret=TLiJ1wiq',{/*天气API网站实时接口(数据更详细)*/
　　　　params:{city:weather.city}
　　})
　　.then(function (response){
weather.todayWeather = response.data;
console.log(response.data);
　　});
}
}
})
</script>
</body>
</html>

复制代码

最佳答案

月排行榜 / 总排行榜

542624047

2021-4-10 18:52:45

数据渲染的时候列表是空的，所以就缺少数据，后来数据有了，但是html已经渲染过一次，他是不会立刻渲染的，可以理解为只会渲染的时候data进行一次传值，传值的时候有就是有，没有就是没有，之后哪怕数据更新了，也不会再次渲染。提供一个解决方案，给有v-for的div加一个大的div，然后给这个加一个v-if属性绑定一个变量，值为true，用于刷新页面，只需要在数组发生变化的函数尾部进行一次false赋值再true赋值，就会强制更新html。

跳转到最佳答案楼层

542624047 · 发表于 2021-4-10 18:52:45

这个最佳答案由 542624047 给出，感谢 542624047 的回答。

单击隐藏图章

数据渲染的时候列表是空的，所以就缺少数据，后来数据有了，但是html已经渲染过一次，他是不会立刻渲染的，可以理解为只会渲染的时候data进行一次传值，传值的时候有就是有，没有就是没有，之后哪怕数据更新了，也不会再次渲染。提供一个解决方案，给有v-for的div加一个大的div，然后给这个加一个v-if属性绑定一个变量，值为true，用于刷新页面，只需要在数组发生变化的函数尾部进行一次false赋值再true赋值，就会强制更新html。

Mr.Consummate · 发表于 2021-4-11 09:32:54

emmmmm，后面两个API过期了。。。
好像没法演示了。。。
但是还是想知道为什么会有这种情况出现

wp231957 · 发表于 2021-4-11 17:31:48

Mr.Consummate 发表于 2021-4-11 09:32
emmmmm，后面两个API过期了。。。
好像没法演示了。。。
但是还是想知道为什么会有这种情况出现

继续努力啊 bug 肯定存在的

Mr.Consummate · 发表于 2021-5-3 18:08:10

542624047 发表于 2021-4-10 18:52
数据渲染的时候列表是空的，所以就缺少数据，后来数据有了，但是html已经渲染过一次，他是不会立刻渲染的 ...

Thanks!

542624047 · 发表于 2021-5-7 18:10:05

Mr.Consummate 发表于 2021-5-3 18:08
Thanks!

恰好遇到过能解决就好不用谢

账号		自动登录	找回密码
密码			立即注册