javascript - Vue2 Ajax (axios) n'a pas réussi à mettre à jour les données Dom via la pagination
Étant donné que dans le projet, les données d'arrière-plan sont envoyées au front-end en même temps, le front-end doit effectuer un traitement de pagination.
Vue2+Axios est utilisé pour effectuer des requêtes ajax. Actuellement, le fichier console.log des données backend peut être imprimé avec succès, mais il ne peut pas être mis à jour sur le dom.
html
<section class="main">
<ul class="list">
<li v-for="info in listt2">
<img src="#" v-bind:alt="info.Name">
<h4> <a class="talk" target="_blank" v-bind:href="'content.html?'+info.id">{{ info.title }}</a></h4>
<span class="ckey">【{{ info.key }}】 </span> <span style="color: #ffffff;"> {{info.id}}</span>
</li>
</ul>
<!--分页按钮区域-->
<p class="pages" v-show="onn">
<button class="previem" @click="page('last')" v-show='curPage>0'>上一页</button>
<button class="next" @click="page('!last')" v-show="curPage<pageCount-1">下一页</button>
</p>
</section>JS
Vue.prototype.$ajax = axios; //修改原型链
var vm = new Vue({
el: '.main',
data: {
listt2:[ ], //页面要展示的数据
pageSize:10, //翻页每页显示数据
curPage:0, //当前页面
pageCount:'', //总共页面数
onn:true, //默认显示分页
items:' ', //后台数据
},
created:function(){
//Ajax获取后台数据，获取的数据存储在 this.items
var url = "api.json";
this.$ajax.get(url)
.then(function (response) {
var jsons = response.data.getJson;
var self = this;
this.items =jsons;
console.log(self.items);
}).catch(function (error) {
console.log(error);
});
this.fanye(); //调用分页
},
methods: {
page: function (el) { //点击翻页
el == 'last' ? this.curPage-- : this.curPage++;
var curtotal = this.curPage * this.pageSize;
var tiaoshu = this.curPage * this.pageSize + this.pageSize;
this.listt2 = this.items.slice(curtotal,tiaoshu);
document.body.scrollTop = 0;
},
fanye: function () { //分页处理
var _this = this;
_this.listt2 = [];
if (_this.items) {
_this.pageCount = Math.ceil(_this.items.length / _this.pageSize);
for (var i = 0; i < _this.pageSize; i++) {
if (_this.items[i]) {
_this.listt2.push(_this.items[i]);
}
}
}
}
}
})Format des données de simulation renvoyées
{
"getJson":[
{
"id":"59",
"key":"science",
"title":" 动物也是科技宅，这些智能科技装备你想要吗？ ",
"time":"2017-05-12",
"name":"两个质子",
"eng":"lianggezhizi"
},
{
"id":"60",
"key":"science",
"title":" 肯定你没见过的养老新科技！ ",
"time":"2017-06-19",
"name":"老年健康生活方式",
"eng":"aged-expo"
}]
}
Je l'ai vérifié plusieurs fois, mais il n'y a toujours qu'un style mais aucune donnée, j'espère qu'un expert pourra me donner quelques conseils
