javascript - Vue2 Ajax (axios) gagal mengemas kini data dom melalui paging

Question

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

Answer 1

Dalam yang pertama kemudian diminta dalam kaedah yang dibuat, sebutkan var self = this; kepada this.$ajax.get(url Di atas,
Isu skop, ini dalam kaedah kemudian bukan lagi ini dalam vue

).

Answer 2

Datacreated ajax数据获取是异步的，你this.fanye()执行的时候，根本没有数据传入； 你可以打断点，console.log anda, cuba dulu