VuejsとAxiosを介して投稿リクエストをLaravelバックエンドに送信

Question

vaultを使って基本的なajaxリクエストを私のlaravelバックエンドに実装するにはいくつかの助けが必要です。特定のユーザーに割り当てられたすべてのコースを取得し、コースの現在のステータスを変更するためのボタンを押すことができるビューを持っているかどうか、それだけです。私はそれが簡単だと思うので私は自分自身でこれを把握することができなかったことを私はとても欲求不満である、私はそれが動的であることを望む私は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> 

私はコースを持つようにしたい私は、提出されたコースの名前の値をターゲットにすることができるように、リクエストのどのような値られたに等しいこと私がしようとしているようにそれをルートに注入しますが、私はそれを行う方法がわかりません、私はいくつかの異なることを試しました、すべて失敗しました。 そしてここでは、ルート/今、これはフォームが提出され、動作していない、と私はJSONレスポンスを取り戻すルートにリダイレクトしていて、それはそれだOFC api.php

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

、IでありますDOMをリフレッシュして、コースのステータスに応じて新しいIDを持つようにし、コース自体を更新し、ページを更新せずにバックグラウンドで保存するようにします。 私はこれにかなり新しいです、私はフォームがおそらく書き直されるべきであると理解しています、そして私は多くの間違いをしたことを知っていますが、私はそれが機能したいので、

試行錯誤の時間の多くの後、私はアヤックス一部で行われていると私は、私はちょうどいくつかのことを行う必要がある残りのほとんどがよ

UPDATE、これは何ですか私は、ビューでは、これまでに

を行うことができた：

<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リクエストを送信するんだけど、今、最も優先度の高い問題がある、$コースがページに追加された最新のコースを参照しています、私がボタンを押して選択したコースではなく、今度はどのボタンを押しても、最後のコースは$コースに注入され、その後はaxoisのルートに注入されますが、それはまだわかりませんがこれまでのコース更新されます。クロムのネットワークタブを調べた場合、レスポンスが表示され、完成した列の値が更新されますが、まだコードに間違いがあると思いますが、うちいくつかのより多くの事は私に知らせてください、ありがとう

Answer 1

使用している構文は、行を次のように間違っている：

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

それは次のようになります。

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