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

我需要一些帮助,通过vue实现一个基本的ajax请求到我的laravel后端,我有一个名为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依赖关于该课程的状态,以及在不刷新页面的情况下在后台更新和保存课程本身.
我对此很新,我知道表格应该重写,我知道我犯了很多错误,但我只是想让它起作用,所以非常感谢帮助.

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

将按钮的类型从提交更改为按钮允许.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中的网络选项卡,我看到响应并且已完成列的值得到更新,我相信代码中仍然存在一些错误,但我会继续尝试,如果你能指出更多请告诉我,谢谢

解决方法:

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

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

它应该是：

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

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

相关文章