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

Question

我需要一些帮助来通过 vue 向我的 Laravel 后端实现基本的 ajax 请求，我在名为 course 的表上有一个名为 Complete 的布尔值，并且我有一个视图可以获取分配给特定用户的所有课程并允许他们按一个按钮来更改课程的当前状态，无论是否完成，就是这样，这就是我想要做的，现在我可以通过 get 和 post 请求正常进行，显然会导致页面刷新，我想要那个为了通过刷新 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>

我想让 course 等于请求的任何值，这样我就可以将提交的课程名称的值作为目标并将其注入到我正在尝试的路线中，但我不知道该怎么做，我尝试了一些不同的事情，都失败了。这里是 routes/api.php

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

ofc 现在这不起作用，表单正在提交，我被重定向到一条我返回 json 响应的路由，就是这样，我只想刷新 dom，以便按钮具有新的 id 取决于课程的状态，课程本身将在后台更新和保存，无需刷新页面。我对此相当陌生，我知道该表单可能应该重新编写，并且我知道我犯了很多错误，但我只是希望它起作用，因此非常感谢您的帮助。

更新

经过大量的反复试验，我已经完成了 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

将按钮的类型从提交更改为按钮允许 .prevent 方法实际触发，现在表单不再提交，表单仍然需要工作以根据课程状态输出正确的类，但无论如何，

这是我现在拥有的脚本：

<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>

现在不知何故，我实际上正在将发布请求发送到正确的路线，但是现在有一个具有最高优先级的问题，$course 引用的是添加到页面的最新课程，而不是我选择的课程通过按下按钮，现在无论我按下哪个按钮，最后一门课程都会注入 $course，然后注入 axois 中的路线，我不知道如何解决这个问题，但到目前为止该课程已更新，如果我检查了 chrome 中的网络选项卡，我会看到响应并且已完成列的值得到更新，我相信代码中仍然存在一些错误，但我会继续尝试，如果您能指出更多事情请告诉我，谢谢

Answer 1

您使用的语法在以下行中是错误的：

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

它应该是 ：

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