vue js ajax 调用无法读取未定义的属性 'push'

Question

在将数据从数据库推送到网页时，我遇到了 vue.js 问题。我正在使用 laravel 5.3 将数据转换为 Jason。代码将要获取的记录数发布到服务器，然后服务器响应我要在网页上显示的数据。这是 Vue js 代码

new Vue({
        el: "#projects",
        data: {

            count: 0,
            fetched_projects: []
}

 methods:{
       checkproject: function(){
            var fetch = this.count += 4;               

           axios.post('/loadmore', {fetch: fetch })
               .then(function(response) {

                  this.fetched_projects.push(response.data);

               })
               .catch(function(error){
                   console.log(error);
               });

       }

HTML

 <div class="row">
    <div class="col-md-3">
        <ul v-for="more_projects in fetched_projects">
            <li>@{{ more_projects }}</li>

        </ul>

    </div>
</div>

Laravel 控制器

 public function setloadMore(Request $request){

  $new_projects = $request->fetch;

  $results = Model1::with('relation')->take($new_projects)->get();

  return $results;


}

问题出在 this.fetched_projects.push(response.data); 它给了我 "cannot read property 'push' of undifined"

Answer 1

您希望 this 成为您的组件，因此使用箭头函数：

 methods:{
   checkproject: function(){
        var fetch = this.count += 4;               

       axios.post('/loadmore', {fetch: fetch })
           .then(response => {
              this.fetched_projects.push(response.data);
           })
           .catch(function(error){
               console.log(error);
           });

   }

Answer 2

你有 "this" 问题，尝试在你定义 fetch 的地方定义类似 var that = this 的东西，并在 post 中使用它代替 this 应该可以工作。

vue js ajax 调用无法读取未定义的属性 'push'

vue js ajax call cannot read property 'push' of undefined

javascript

php

axios

laravel-5.3

vuejs2

vue js ajax 调用无法读取未定义的 属性 'push'

vue js ajax call cannot read property 'push' of undefined

javascript

php

axios

laravel-5.3

vuejs2

vue js ajax 调用无法读取未定义的属性 'push'