javascript - vue ajax请求回来的数据没有渲染到页面

Question

   //子组件列表
      <ForecastList :items='list'></ForecastList>
   
  //实例
       data: function () {
            return {
                data:{},
                Model:{},
                list:{}
            };
        },
        components:{
            ForecastList
        },
         mounted:function() {
          $('#slider').find('span').on('click',function(){
            $.ajax({
                  url: urlgeren,
                  data:{'gameName':type,"pn":1},
                  dataType: "json",
                  jsonp: "cb",
                  dataType: 'jsonp',
                success: function(data){
                    this.data=data
                    this.Model = data.Model
                    this.list = data.Model.list
                   }.bind(this)
               });
           }

在父组件中点击按钮，已经请求回来数据进行了绑定，但是组件中列表中的数据没有改变，这难道还要重新渲染一次子组件吗；

Answer 1

success函数里的this不等于组件事例吧

Answer 2

this用错了吧

Answer 3

大家都已经说了……ajax里面的this的作用域不是组件了！
所以一般都在ajax外边把this赋值给变量。
在ajax内部使用变量，直接用this是有问题的。我记得官方的文档里面是有说明的。
vue的组件有两个地方需要注意，data是由函数返回的对象。使用ajax里面不能直接用this来更新组件。

Answer 4

mounted:function() {
            var self = this;
          $('#slider').find('span').on('click',function(){
            $.ajax({
                  url: urlgeren,
                  data:{'gameName':type,"pn":1},
                  dataType: "json",
                  jsonp: "cb",
                  dataType: 'jsonp',
                success: function(data){
                    this.data=data
                    this.Model = data.Model
                    this.list = data.Model.list
                   }.bind(self)
               });
           }

把 vue 组建的this用变量selfcache 下来就好了。

Answer 5

网络彩票又要开售了？

Answer 6

this用错了