通过Vuejs和axios向laravel后端提交post请求

Question

我需要通过vue实现基本ajax请求来帮助我的laravel后端，我有一个名为completed的布尔值，名为courses，有一种观点，即获取分配给特定用户的所有课程，并允许他们按下按钮来更改课程的当前状态，无论是否已完成，就是这样，这就是我想要做的，现在我可以正常地完成获取和发布请求，显然会导致页面刷新，我希望这只是刷新DOM的动态，我很沮丧，我无法自己弄清楚这一点，因为我认为它应该很容易，转弯在使用vuejs时，我什么也不知道。

这里是我的CoursesController的显著部分：

public function toggling($name) 
     { 
     $course = Course::where(['name' => $name])->first(); 

     $course->completed = !$course->completed; 
     $course->save(); 

     // return redirect()->back(); 
     return response()->json(['course' => $course], 202); 
     } 

这里是提供课程给用户的视图的显著部分，这是一个表的一部分：

<td> 
    <form method="POST" @submit.prevent="onSubmit" action="{{ route('course.completed', $course->name) }}" id="form-submit"> 
     {{-- {{ method_field('PUT') }} --}} 
     {{ csrf_field() }} 
     @if ($course->completed == true) 
     <button type="submit" class="btn btn-sm" id="coursetogglingtrue">Done!</button> 
     @else 
     <button type="submit" class="btn btn-sm" id="coursetogglingfalse">Not Yet!</button> 
     @endif 

     </form> 
    </td> 

出于某种原因，@ submit.prevent方法不起作用，它工作了几次，但后来它没有，并且表单像往常一样提交。

这些是app.blade.php中的脚本，我不知道应该如何编译它，它只是坐在我的项目的主布局中，我应该将它转移到public/js/app .js文件？或者用gulp编译它？如果你有什么心事请让我知道：

<!-- Scripts --> 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script> 
<script src="/js/app.js"></script> 
<script> 
    new Vue({ 
     el: '#app', 
     data: { 
     course: {} 
     }, 
     methods: { 
     onSubmit() { 
      // course = $event.target; 
      axios.post('/MyCourses/{{course.name}}').then(console.log(course)); 
     } 
     } 
    }); 
</script> 

我想有当然等于要求的任何值，这样我就可以针对所提交的课程名称的值并将其注入到我正在尝试做的路线中，但我不知道如何做到这一点，我尝试了一些不同的东西，都失败了。 这里是路线/ api.php

Route::post('/MyCourses/{name}', 'CoursesController@toggling')->name('course.completed'); 

OFC现在这是行不通的，表单提交，而且我重定向到我回来的JSON响应的路线，这就是它，我只需要刷新dom，以便该按钮具有取决于课程状态的新ID，并且课程本身将在不更新页面的情况下更新并保存在背景中。 我对此相当陌生，我知道表单可能应该重写，而且我知道我已经犯了很多错误，但我只是希望它能够工作，所以帮助将非常感激。

UPDATE

大量的试验和错误小时后，我与AJAX部分完成，我几乎没有，其余的我只是需要做几件事情，这是什么我已经成功至今做，

在视图：

<form method="POST" @click.prevent="onSubmit" action="{{ route('course.completed', $course->name) }}" id="form-submit"> 
         {{ csrf_field() }} 
    @if ($course->completed == true) 
    <button type="button" class="btn btn-sm" id="coursetogglingtrue">Done!</button> 
    @else 
    <button type="button" class="btn btn-sm" id="coursetogglingfalse">Not Yet!</button> 
    @endif 

从提交按钮更改按钮的类型所允许的。防止方法实际触发，现在表单不再提交，表单仍然需要工作才能输出适当的类，具体取决于课程的状态，但不管，

这是我现在的脚本：

<script> 
    new Vue({ 
     el: '#app', 
     data: { 
     course: { 
      name: '', 
      bool: false 
     } 
     }, 
     methods: { 
     onSubmit: function() { 
      this.course.bool = !this.course.bool, 
      axios.post('/MyCourses/{{$course->name}}') 
       .then(function (response){ 
        // {{$course->completed}} = response.course.completed; 
       }); 
     } 
     } 
    }); 
</script> 

不知怎的，现在，我在实际发送POST请求到正确的路线，但有具有最高优先级，现在，美元。当然会引用添加到网页的最新课程有问题，而不是我通过按下按钮选择的过程，现在无论按哪个按钮，最后一个过程被注入到$ course，然后ofc到axois的路径，我不知道如何计算出来，但是迄今为止当然得到更新，如果我检查了chrome中的网络标签，我看到了响应，并且完成列的值得到更新，我相信代码中仍然存在一些错误，但是我会继续尝试，如果可以的话一些更多的东西，请让我知道，谢谢

Answer 1

你正在使用的语法是错误的下面一行：

axios.post('/MyCourses/{{course.name}}').then(console.log(course)); 

它应该是：

axios.post('/MyCourses/' + course.name).then(console.log(course));