由於在專案中,後台的資料一次給前端,前端需要做一些分頁的處理。
用的是Vue2 Axios 來做ajax請求 目前可以得到後端的資料console.log列印成功,但就是更新不上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]);
}
}
}
}
}
})
傳回的模擬資料格式
{
"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"
}]
}
已檢查多遍,仍是只有樣式沒有數據,還望大牛指點
created方法裡面請求的第一個then裡面,把var self = this; 提到this.$ajax.get(url) 上面,
作用域的問題,then方法裡面的this已經不再是vue裡的this
你
created
ajax資料取得是異步的,你this.fanye()
執行的時候,根本沒有資料傳入; 你可以打斷點,console.log
數據,試試看先