鱼C论坛

 找回密码
 立即注册
查看: 308|回复: 5

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

[复制链接]
发表于 2021-4-10 18:52:44 | 显示全部楼层 |阅读模式
20鱼币
本帖最后由 Mr.Consummate 于 2021-4-10 20:16 编辑

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

1.jpg     2.jpg

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

3.jpg

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

在线演示传送门

代码如下

  1. <!DOCTYPE html>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title>天气查询</title>
  7.     <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10.     <div>
  11.         <div class="weatherSearch">
  12.             <div class="inputCityName" >
  13.                 <span class="in">
  14.                     <input type="text" v-model="city" @keyup.enter="search" placeholder="城市名称">
  15.                 </span>
  16.                 <span class="btn">
  17.                     <button @click="search">查 询</button>
  18.                 </span>
  19.             </div>
  20.             <div class="weatherData">
  21.                 <div class="day0">
  22.                     <div class="line1">
  23.                         <span>{{yesterday.date}}</span>
  24.                     </div>
  25.                     <div class="line2">
  26.                         <span>{{yesterday.type}}</span>
  27.                     </div>
  28.                     <div class="line3">
  29.                         <b><span>{{yesterday.low}}</span></b>
  30.                         <span v-if="yesterday.length!=0">~</span>
  31.                         <b><span>{{yesterday.high}}</span></b>
  32.                     </div>
  33.                     <div class=line4>
  34.                         <span>{{yesterday.fx}}</span>
  35.                         <span>{{fengli[0]}}</span>
  36.                     </div>
  37.                 </div>
  38.                 <div v-for="(each,index) in weatherList" v-bind:class=eachClass[index]>
  39.                     <div class="line1">
  40.                         <span>{{each.date}}</span>
  41.                     </div>
  42.                     <div class="line2">
  43.                         <span>{{tianqi[index]}}</span>
  44.                     </div>
  45.                     <div class="line3">
  46.                     <b><span>{{each.low}}</span></b>
  47.                     <span>~</span>
  48.                     <b><span>{{each.high}}</span></b>
  49.                     </div>
  50.                     <div class=line4>
  51.                         <span>{{each.fengxiang}}</span>
  52.                         <span>{{fengli[index+1]}}</span>
  53.                     </div>
  54.                 </div>
  55.             </div>
  56.             <div class="change">
  57.                 <div v-for="(item,index) in riqi" v-bind:class=eachClass2[index]>
  58.                     <span>{{item}}</span>
  59.                 </div>
  60.             </div>
  61.         </div>
  62.     </div>

  63.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  64.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  65.     <!-- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->

  66.     <script>
  67.         var vm = new Vue({
  68.             el: ".weatherSearch",
  69.             data: {
  70.                 city:"",
  71.                 tips:"",
  72.                 fengli:[],/*对API返回的离谱格式进行处理*/
  73.                 tianqi:[],/*对另一个API返回的结果进行处理以便在VUE中混用数据*/
  74.                 riqi:[],/*依旧是便于引用数据*/
  75.                 weatherList:[],
  76.                 weatherList2:[],
  77.                 yesterday:[],
  78.                 todayWeather:[],
  79.                 eachClass:["day1","day2","day3","day4","day5"],
  80.                 eachClass2:["footer1","footer2","footer3","footer4","footer5","footer6"]
  81.             },
  82.             methods: {
  83.                 search:function(){/*综合多个API接口数据*/
  84.                     var weather = this;
  85.                     axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)/*中国天气网接口(数据更权威?)*/
  86.                     .then(function (response){
  87.                         console.log(response.data.data);
  88.                         weather.weatherList = response.data.data.forecast;
  89.                         weather.yesterday = response.data.data.yesterday;
  90.                         weather.tips = response.data.data.ganmao;
  91.                         console.log(weather.tips);
  92.                         weather.fengli[0] = weather.yesterday["fl"].substring(9,11);
  93.                         for(var i=0;i<=4;i++){
  94.                             weather.fengli[i+1] = weather.weatherList[i].fengli.substring(9,11);
  95.                         }
  96.                     })
  97.                     .catch(function (error){                     
  98.                         console.log(error);
  99.                         alert("Oops!\n请输入有效的城市名!");
  100.                         return;
  101.                     });
  102.                     axios.get('https://www.tianqiapi.com/free/week?appid=32294657&appsecret=TLiJ1wiq',{/*天气API网站七日接口(数据更详细)*/
  103.                     params:{city:weather.city}
  104.                   })
  105.                   .then(function (response){
  106.                         weather.weatherList2 = response.data.data;
  107.                         for(var i=0;i<=5;i++){
  108.                             weather.tianqi[i] = weather.weatherList2[i].wea;
  109.                         };
  110.                         for(var t=1;t<=5;t++){
  111.                             weather.riqi[t] = weather.weatherList2[t].date;
  112.                         };
  113.                         weather.riqi[0] = "Yesterday";
  114.                         weather.riqi[1] = "Today";
  115.                         console.log(response.data.data);
  116.                   });
  117.                     axios.get('https://www.tianqiapi.com/free/day?appid=32294657&appsecret=TLiJ1wiq',{/*天气API网站实时接口(数据更详细)*/
  118.                     params:{city:weather.city}
  119.                   })
  120.                   .then(function (response){
  121.                         weather.todayWeather = response.data;
  122.                         console.log(response.data);
  123.                   });
  124.                 }
  125.             }
  126.         })
  127.     </script>
  128. </body>
  129. </html>
复制代码
最佳答案
2021-4-10 18:52:45
数据渲染的时候列表是空的,所以就缺少数据,后来数据有了,但是html已经渲染过一次,他是不会立刻 渲染的,可以理解为只会渲染的时候data进行一次传值,传值的时候有就是有 ,没有就是没有,之后哪怕数据更新了,也不会再次渲染。提供一个解决方案,给有v-for的div加一个大的div,然后给这个加一个v-if属性绑定一个变量,值为true,用于刷新页面,只需要在数组发生变化的函数尾部进行一次false赋值再true赋值,就会强制更新html。

最佳答案

查看完整内容

数据渲染的时候列表是空的,所以就缺少数据,后来数据有了,但是html已经渲染过一次,他是不会立刻 渲染的,可以理解为只会渲染的时候data进行一次传值,传值的时候有就是有 ,没有就是没有,之后哪怕数据更新了,也不会再次渲染。提供一个解决方案,给有v-for的div加一个大的div,然后给这个加一个v-if属性绑定一个变量,值为true,用于刷新页面,只需要在数组发生变化的函数尾部进行一次false赋值再true赋值,就会强制更新html。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2021-4-10 18:52:45 | 显示全部楼层    本楼为最佳答案   
数据渲染的时候列表是空的,所以就缺少数据,后来数据有了,但是html已经渲染过一次,他是不会立刻 渲染的,可以理解为只会渲染的时候data进行一次传值,传值的时候有就是有 ,没有就是没有,之后哪怕数据更新了,也不会再次渲染。提供一个解决方案,给有v-for的div加一个大的div,然后给这个加一个v-if属性绑定一个变量,值为true,用于刷新页面,只需要在数组发生变化的函数尾部进行一次false赋值再true赋值,就会强制更新html。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
 楼主| 发表于 2021-4-11 09:32:54 | 显示全部楼层
emmmmm,后面两个API过期了。。。
好像没法演示了。。。
但是还是想知道为什么会有这种情况出现
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2021-4-11 17:31:48 | 显示全部楼层
Mr.Consummate 发表于 2021-4-11 09:32
emmmmm,后面两个API过期了。。。
好像没法演示了。。。
但是还是想知道为什么会有这种情况出现

继续努力啊   bug 肯定存在的
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
 楼主| 发表于 2021-5-3 18:08:10 | 显示全部楼层
542624047 发表于 2021-4-10 18:52
数据渲染的时候列表是空的,所以就缺少数据,后来数据有了,但是html已经渲染过一次,他是不会立刻 渲染的 ...

Thanks!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 6 天前 | 显示全部楼层

恰好遇到过 能解决就好  不用谢
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1

GMT+8, 2021-5-13 00:36

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表