如何在Laravel中使用Vue.js发送表单？

Question

I am trying to build form and send it to laravel backend using post vue. But that's not working. What can I do to improve it, and how to put the csrf field?

Form:

<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:

<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>

And error:

Uncaught TypeError: Cannot read property 'post' of undefined

Answer 1

in vue 2 with laravel 5, laravel comes with presets for this using axios.

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));
    }
}

Answer 2

I don't use vue-resource, but the principal's the same. You need to put your form in your post. Give your form a ref, then create a FormData object, like this...

markup

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

js

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

Don't forget to import vue-resource, like the man says :-)