問題描述

由于在項(xiàng)目中，后臺(tái)的數(shù)據(jù)一次性給前端，前端需要做一些分頁的處理。用的是Vue2+Axios 來做ajax請(qǐng)求 目前可以得到后端的數(shù)據(jù)console.log打印成功,但就是更新不上dom上。

html

<section class='main'> <ul class='list'><li v-for='info in listt2'> <img src='http://www.b3g6.com/wenda/2776.html#' v-bind:alt='info.Name'> <h4> <a target='_blank' v-bind:href='http://www.b3g6.com/wenda/’content.html?’+info.id'>{{ info.title }}</a></h4> <span class='ckey'>【{{ info.key }}】 </span> <span style='color: #ffffff;'> {{info.id}}</span></li> </ul> <!--分頁按鈕區(qū)域--> <p v-show='onn'> <button @click='page(’last’)' v-show=’curPage>0’>上一頁</button><button @click='page(’!last’)' v-show='curPage<pageCount-1'>下一頁</button> </p></section>

JS

Vue.prototype.$ajax = axios; //修改原型鏈 var vm = new Vue({el: ’.main’,data: { listt2:[ ], //頁面要展示的數(shù)據(jù) pageSize:10, //翻頁每頁顯示數(shù)據(jù) curPage:0, //當(dāng)前頁面 pageCount:’’, //總共頁面數(shù) onn:true, //默認(rèn)顯示分頁 items:’ ’, //后臺(tái)數(shù)據(jù) },created:function(){ //Ajax獲取后臺(tái)數(shù)據(jù)，獲取的數(shù)據(jù)存儲(chǔ)在 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(); //調(diào)用分頁},methods: { page: function (el) { //點(diǎn)擊翻頁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]);} }} }}})

返回的模擬數(shù)據(jù)格式

{ 'getJson':[{ 'id':'59', 'key':'science', 'title':' 動(dòng)物也是科技宅，這些智能科技裝備你想要嗎？ ', 'time':'2017-05-12', 'name':'兩個(gè)質(zhì)子', 'eng':'lianggezhizi'},{ 'id':'60', 'key':'science', 'title':' 肯定你沒見過的養(yǎng)老新科技！ ', 'time':'2017-06-19', 'name':'老年健康生活方式', 'eng':'aged-expo'}]}

已檢查多遍，仍是只有樣式?jīng)]有數(shù)據(jù)，還望大牛指點(diǎn)

問題解答

created方法里面請(qǐng)求的第一個(gè)then里面，把var self = this; 提到this.$ajax.get(url) 上面，作用域的問題，then方法里面的this已經(jīng)不再是vue里的this

你created ajax數(shù)據(jù)獲取是異步的，你this.fanye()執(zhí)行的時(shí)候，根本沒有數(shù)據(jù)傳入； 你可以打斷點(diǎn)，console.log數(shù)據(jù)，試一下先