NUXT.js加载更多功能如何实现

Question

问题描述

现在是通过asyncData来渲染出第一版的页面数据，然后想通过点击加载更多加载出获取到列表数据，但是效果是通过接口获取到的数据并不能渲染到页面。

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<template>
<section class="index">

<div class="leftAdBox">
  <div class="leftAdBoxItem"  v-for="(image,imageindex) in leftAdlist" :key="'leftAdlist'+imageindex" @click="openTheAd(image.url)">
    <img :src="'/api/'+image.pic"/>
  </div>
</div>
  <el-row class="indexBox" v-if="dataList.length != 0">
    <el-col :span="24" v-for="(o,index) in dataList" :key="index" :style="{'padding-top':index==0?'25px':'0px'}">
        <el-card :body-style="{ padding: '0px',position:'relative' }">
        <div class="colbox">
          <div class="coltap"  @click="showContent(o.id)">
            <!-- <span style="opacity: 0.8;">{{o.author}}</span> -->
          </div>
          <img :src="'/api/'+o.cover" class="image"  @click="showContent(o.id)">
          <div class="colmsg">
              <div class="coltitle"  @click="showContent(o.id)">{{o.title}}</div>
              <div class="msg">
                <div class="msgitem" @click="like(index)">
                  <i class="icon fontFamily ailiyun-xin1"  v-bind:class="{ active:o.hadlike}"></i>{{o.likes}}
                </div>
                <!-- <div class="msgitem">
                  <i class="icon fontFamily ailiyun-pinglun"></i> 200
                </div> -->
                <div class="msgitem">
               
                </div>
              </div>
          </div>
        </div>
        </el-card>
    </el-col>
</el-row>
<div class="indexFooter"  v-if="showLoadMore && dataList.length != 0">
  <el-button @click="getdataList()">加载更多</el-button>
</div>
<div class="container nullcontent"  v-if="dataList.length == 0">
  <img src='~/static/image/nullcontent.png' style="width: 250px;height: 250px;">
</div>

</section>
</template>

<script>
export default {
data() {

return {
  updataTime:'',
  dataList:[],
  setTitle:'',
  setKeyWork:'',
  setDescription:'',
};

},
async asyncData({ app }) {
let thedataList = [];
return app.$axios.get('/api/article/list').then(function(response) {

return { dataList:response.info.articlelist ,updataTime:response.info.uptime, setTitle:'Home'}

});
},
head () {

return {
  title: this.setTitle,
  meta: [
    { hid: 'keywords', name: 'keywords', content: this.setKeyWork },
    { hid: 'description', name: 'description', content:  this.setDescription  }
  ]
}

},
methods:{

 getdataList() {
  let postData = {
    token: ""
  };
  let _this = this;
  _this.loading = true;
  let url = "/api/article/list";
  if (this.updataTime)url = "/api/article/list?uptime=" + this.updataTime;
  this.$axios.post(url, postData).then(function(response) {
      _this.loading = false;

      if (response.data.msg == "success") {
        _this.updataTime = response.data.info.uptime;
        if (response.data.info.end != false) _this.showLoadMore = false;
        for (var i = 0; i < response.data.info.articlelist.length; i++) {
          _this.dataList.push(response.data.info.articlelist[i]);
        }
         _this.dataList.sort(function(a,b){
            return b.id - a.id;
        })
      }

    })
    .catch(function(response) {
      _this.loading = false;
    });
}

}
}
</script>

你期待的结果是什么？实际看到的错误信息又是什么？

想问下如何实现客户端异步加载数据的效果