How to send form using Vue.js in laravel?

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

Have you imported vue-resource ?

Panther
– Panther

2017-10-03 07:48:20 +00:00
Commented Oct 3, 2017 at 7:48 — Panther
– Panther, Commented Oct 3, 2017 at 7:48

aimme · Accepted Answer · 2017-10-03 08:41:26Z

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

answered Oct 3, 2017 at 8:41

aimme

6,9087 gold badges54 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bbsimonbb · Accepted Answer · 2017-10-03 08:53:40Z

0

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

edited Oct 3, 2017 at 8:53

answered Oct 3, 2017 at 8:23

bbsimonbb

29.3k18 gold badges92 silver badges129 bronze badges

1 Comment

bbsimonbb Over a year ago

Ok that's progress. F12. Look in network tab. Check that you're hitting the URL you want, and that your form data is being sent.

Collectives™ on Stack Overflow

How to send form using Vue.js in laravel?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related