problem description
now the page data of the first version is rendered through asyncData, and then you want to get the list data by clicking load and more, but the effect is that the data obtained through the API cannot be rendered to the page.
the environmental background of the problems and what methods you have tried
related codes
/ / Please paste the code text below (do not replace the code with pictures)
< 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; iPP) {
_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 >
what result do you expect? What is the error message actually seen?
I would like to ask how to achieve the effect of asynchronously loading data on the client