Question

我需要一些帮助，通过vue到我的laravel后端实现一个基本的ajax请求，我在一个名为courses的表上有一个名为completed的布尔值，我有一个视图，它获取分配给特定用户的所有课程并允许他们按下一个按钮来改变课程的当前状态，无论是否已经完成，就是这样，这就是我想做的事情，现在我可以通过获取和发布请求来正常进行，显然会刷新页面，我想让它变得充满活力而只是刷新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>

我希望课程等于请求的任何值，这样我就可以将提交的课程名称的值作为目标，并将其注入到路径中，但是我正在尝试我不知道该怎么做，我尝试了一些不同的东西，都失败了。这里是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));

Answer 2

对以上答案的改进是使用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

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

2 个答案: