为什么我的 laravel vue crud 没有自动将数据发布到帖子部分

Question

嗨，朋友们，我正在使用带有 vue 的 laravel 5.6 .js 用于 crud 函数。我想获取我刚刚在帖子部分发布的帖子，而无需再次重新加载整个页面。我已经编写了此代码，但是这些代码将数据发送到控制台，而不是发送到帖子视图部分。

我的应用程序.js看起来像这样

const app = new Vue({
    el: '#app',
    data: {
    msg: 'Update new Post:',
    content:'', 
    posts:[]
    },
    ready:function(){
        this.created();
    },
    created(){
         axios.get('http://{mylink}/home/post')
             .then(response=>{
                 console.log(response.data);//show if success
                 this.posts = response.data; // putting posts into array
             })
             .catch(function (error) {
                 console.log(error.response);
             });
    },

    methods:{
        addPost(){
            axios.post('http://{mylink}/home/addPost', {
                content:this.content
            })
            .then(function(response){
                console.log('Data updated');
                if (response.status == 200) {
                    alert('Your post has been updated');
                    app.posts=reponse.data;
                }
            })
            .catch(function(error){
                console.log(error.response);
            });
        }
    }
});

我的控制器看起来像这样

 public function posts(){
        $posts=DB::table('posts')
        ->leftJoin('users','users.id','posts.user_id')
        ->leftJoin('profiles','profiles.user_id','posts.user_id')
        ->get();
        return view('home',compact('posts'));
    }
    public function addPost(Request $request){
        $content = $request->content;
        $createPost=DB::table('posts')
        ->insert(['content'=>$content,'user_id'=>Auth::user()->id,
        'status'=>0,'created_at'=>date("Y-m-d H:i:s"),'updated_at'=>date("Y-m-d H:i:s")]);
        if($createPost){
            $posts_json = DB::table('posts')
         ->leftJoin('users','users.id','posts.user_id')
         ->leftJoin('profiles','profiles.user_id','posts.user_id')
         ->orderBy('posts.created_at','DESC')->take(2)
         ->get();
        return $posts_json;
        }
    }

路线如下所示

Route::post('/home/addPost','PostController@addPost')->name('home.addPost');
Route::get('/home/post',function(){
    $posts_json = DB::table('posts')
        ->leftJoin('users','users.id','posts.user_id')
        ->leftJoin('profiles','profiles.user_id','posts.user_id')
         ->orderBy('posts.created_at','DESC')
        ->get();
        return $posts_json;
});

我的观点是这样的

 <div v-for="post in posts">
                            <div class="card">
                                <div class="card-body">
                                    <blockquote class="blockquote mb-0">
                                <p>@{{post.content}}</p>
                             <footer class="blockquote-footer">Status By <cite title="Source Title">@{{post.name}}</cite>  <img src="{{url('/')}}/img/" alt="Card image cap" height="30px" width="30px" style="border-radius:50%;"></footer>
                            </blockquote>
                                        </div>
                                    </div>
                      </div>

Answer 1

我看到您的代码存在许多问题，但如果问题仅在addPost(您说存在问题(方法中，请将其替换为以下内容：

    addPost(){
        axios.post('http://{mylink}/home/addPost', {
            content:this.content
        })
        .then(response => {
            console.log(response.data);
            if (response.status == 200) {
                alert('Your post has been updated');
                this.posts = reponse.data;
            }
        })
        .catch(error =>{
            console.log(error.response);
        });
    }

此外，如果您将方法替换为我发布的方法，您将能够看到自从我控制台记录它以来您从后端获得的响应。然后你会看到你是否得到了想要的回应

Answer 2

如您上面的评论中所述，这是授权的问题。我会把我的旧答案留在这里留给后人，但下次包括问题开头的状态代码会很好。

---

我相信您的"this"上下文在像这样在回调中使用时是无效的。尝试这样的事情(编辑(刚刚意识到您想要addPosts部分：

    addPost(){
        let vm = this;
        axios.post('http://{mylink}/home/addPost', {
            content:this.content
        })
        .then(function(response){
            console.log('Data updated');
            if (response.status == 200) {
                alert('Your post has been updated');
                vm.posts=reponse.data;
            }
        })
        .catch(function(error){
            console.log(error.response);
        });
    }