javascript – Vue2 Ajax (Axios) konnte Dom-Daten nicht über Paging aktualisieren

Question

Da im Projekt die Hintergrunddaten gleichzeitig an das Front-End gesendet werden, muss das Front-End eine gewisse Paging-Verarbeitung durchführen.
Vue2+Axios wird verwendet, um Ajax-Anfragen zu stellen. Derzeit können die Backend-Daten console.log erfolgreich gedruckt werden, aber sie können nicht auf dem Dom aktualisiert werden.

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]);
                        }
                    }
                }
            }
        }
        })

Zurückgegebenes Simulationsdatenformat

{
    "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"
        }]
}

Ich habe es schon oft überprüft, aber es gibt immer noch nur einen Stil, aber keine Daten. Ich hoffe, ein Experte kann mir einen Rat geben

Answer 1

created方法里面请求的第一个then里面，把var self = this; 提到this.$ajax.get(url) 上面，
作用域的问题，then方法里面的this已经不再是vue里的this

Answer 2

你created ajax数据获取是异步的，你this.fanye()执行的时候，根本没有数据传入； 你可以打断点，console.log数据，试一下先