laravelでVue.jsを使用してフォームを送信する方法は？

Question

私はフォームを構築し、 vueを使用してlaravelバックエンドに送ろうとしています。しかし、それは動作していません。それを改善するために私は何ができ、csrfフィールドを置くのですか？

フォーム：

<div class="modal fade" id="modal" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Search people!</h4> 
      </div> 
      <div class="modal-body"> 
       <form method="POST" class=""> 
        <div class="form-group"> 
         <label for="city">City:</label> 
         <input type="text" class="form-control" v-model="football.city" id="city"> 
        </div> 
        <button v-on:click.prevent="getFilterRequest()" class="btn btn-blue">Search</button> 
       </form> 
      </div> 
     </div> 
    </div> 
</div> 

ヴュー：私はVUE-のリソースを使用しませんが、校長は同じだ

Uncaught TypeError: Cannot read property 'post' of undefined

Answer 1

：

<script> 
    export default { 
     props: [ 
      'user', 
      'users' 
     ], 
     data: function() { 
      return { 
      usr: [], 
      football: [], 
      } 
     }, 
     mounted() { 

     }, 
     methods: { 
      getAvatarUrl() 
      { 
      return 'img/lock_thumb.jpg'; 
      }, 
      getFilterRequest() 
      { 
      return this.$http.post('/football/search', new FormData(this.$refs.myForm)); 
      } 
     } 
    } 
</script> 

とエラー。 あなたのポストにあなたのフォームを置く必要があります。このように、いるFormDataオブジェクトを作成し、フォームREFを与える...

マークアップ

<form method="POST" class="" ref="myForm"> 

JS

return this.$http.post('/football/search', new FormData(this.$refs.myForm)) 

がvue-インポートすることを忘れないでください 人のように:-)リソース：

Answer 2

vue 2 in laravel 5、 hのプリセットを使用しています。

JS

import axios from 'axios' 

//vue data 
data : { 
    football.city: '' 
} 


methods: { 
    getFilterRequest() { 
     axios['post']('/football/search', this.data) 
      .then(response => console.log(response)) 
      .catch(error => console.log(error)); 
    } 
}