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

Question

我需要一些帮助来通过 vue 向我的 laravel 后端实现一个基本的 ajax 请求，我在一个名为 courses 的表上有一个名为 completed 的 bool 值，我有一个 View 可以获取分配给特定用户的所有类(class)并允许他们按下一个按钮来改变类(class)的当前状态，完成与否，就是这样，这就是我想做的，现在我可以通过获取和发布请求正常完成，显然会导致页面刷新，我希望仅通过刷新 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);
        }

这是向用户提供类(class)的 View 的重要部分，它是表格的一部分:

    <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 吗？杰斯？或者使用 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 等于请求的任何值，这样我就可以将提交的类(class)名称的值作为目标，并将其注入(inject)到我正在尝试做的路由中，但是我不确定该怎么做，我尝试了一些不同的事情，但都失败了。 这是 routes/api.php

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

ofc 现在这是行不通的，表单正在提交，我被重定向到一条路线，在那里我得到了 json 响应，仅此而已，我只想刷新 dom，这样按钮就会有新 id 取决于类(class)的状态，类(class)本身将在后台更新和保存而不刷新页面。 我对此很陌生，我知道该表格可能应该重写，而且我知道我犯了很多错误，但我只是希望它能正常工作，因此非常感谢您的帮助。

更新

经过大量的试验和错误，我完成了 ajax 部分，我几乎完成了其余部分我只需要做一些事情，这就是我到目前为止所做的,

在 View 中:

  <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 方法实际触发，现在表单不再提交，表单仍然需要工作以便根据类(class)的状态输出正确的类但无论如何，

这是我现在的脚本:

<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 正在引用添加到页面的最新类(class)，而不是类(class)我通过按下按钮选择的，现在无论我按下哪个按钮，最后一个类(class)都会被注入(inject)到 $course，然后是 axois 中的路线，我还不知道如何解决这个问题，但到目前为止那个类(class)得到更新，如果我检查 chrome 中的网络选项卡，我会看到响应并且已完成列的值得到更新，我相信代码中仍然存在一些错误，但我会继续尝试，如果你能指出还有一些事情请告诉我，谢谢

Answer 1

对上述答案的改进是使用 ES6 中引入的模板文字。

代替:

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

你可以这样做:

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

可在此处找到有关模板文字功能和语法的更多信息: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals