多次使用axios请求数据 第一次的数据可以显示在html上 后面的就不行了

Question

<template v-for='obj in topic'>

   <div class='row'>
   <img :src='obj.author.avatar_url' :title="obj.author.loginname"/>
   <span>{{obj.reply_count}}</span>
   <span>/</span>
   <span>{{obj.visit_count}}</span>
   <span>{{obj | tabName}}</span>
   <span>{{obj.title}}</span>
   <span></span>
   <!--就这有lastReply不能显示 其他的数据都能显示 
      这个请求不是第一次请求
   -->
   <img :src='lastReply'/>
   
   <router-link :to="{name:'topic',params:{id:1}}">
     this is root page
   </router-link>
   </div>
 </template>
 
 

getData:async function(){

  var limit=5;
  var data=await axios({
    method:'get',
url:'https://cnodejs.org/api/v1/topics',
params:{
  limit:limit
}
  })
  //这次请求来的数据可以显示到html
  console.log(data.data.data);
  this.topic=data.data.data;
  var id=data.data.data[0].id;
  
  var reply_btw='';
  
 for(var i=0;i<limit;i++){
    id=data.data.data[i].id;
    //这几次请求来的数据可以显示在控制台 但在template中就不行了了
    reply_btw=await axios({
                            url:'https://cnodejs.org/api/v1/topic/'+id
                          });

console.log(reply_btw.data.data.replies);
    if(reply_btw.data.data.replies.length<1){
  this.topic[i].lastReply=false;
}
else{
 //所有请求来的数据都存到topic里面
  this.topic[i].lastReply=reply_btw.data.data.replies.slice(-1)[0].author.avatar_url;
}

  }
  //最终在控制台显示的数据是完整的
  console.log(this.topic);
}

Answer 1

修改数组用this.$set(data, index, value)
https://cn.vuejs.org/v2/guide...