javascript - Vue2 Ajax (axios) gagal mengemas kini data dom melalui paging
Memandangkan dalam projek, data latar belakang dihantar ke bahagian hadapan pada satu masa, bahagian hadapan perlu melakukan beberapa pemprosesan halaman.
Vue2+Axios digunakan untuk membuat permintaan ajax Pada masa ini, console.log data bahagian belakang boleh dicetak dengan jayanya, tetapi ia tidak boleh dikemas kini pada 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 data simulasi dikembalikan
{
"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"
}]
}
Saya dah semak banyak kali, tapi masih ada gaya tapi tiada data, harap pakar boleh bagi nasihat
