Submitting form in Vue.js with ajax

Question

I'm really stuck on how I would work with submitting a form that makes an ajax request using Vue.js and vue-resource then using the response to fill a div.

I do this from project to project with js/jQuery like this:

view in blade

{!! Form::open(['route' => 'formRoute', 'id' => 'searchForm', 'class' => 'form-inline']) !!}
    <div class="form-group">
        <input type="text" name="id" class="form-control" placeholder="id" required="required">
    </div>
    <button type="submit" class="btn btn-default">Search</button>
{!! Form::close() !!}

js/jquery

var $searchForm = $('#searchForm');
var $searchResult = $('#searchResult');

$searchForm.submit(function(e) {
    e.preventDefault() ;

    $.get(
        $searchForm.attr('action'),
        $searchForm.serialize(),
        function(data) {
            $searchResult.html(data['status']);
        }
    );
});

What I've done/tried so far in Vue.js:

view in blade

{!! Form::open(['route' => 'formRoute', 'id' => 'searchForm', 'class' => 'form-inline']) !!}
    <div class="form-group">
        <input type="text" name="id" class="form-control" placeholder="id" required="required">
    </div>
    <button type="submit" class="btn btn-default" v-on="click: search">Search</button>
{!! Form::close() !!}

vue/js

    Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');

    new Vue({
        el: '#someId',

        data: {

        },

        methods: {
            search: function(e) {
                e.preventDefault();

                var req = this.$http.get(
                    // ???, // url
                    // ???, // data
                    function (data, status, request) {
                        console.log(data);
                    }
                );
            }
        }
    });

I'm wondering if it's possible to use components when dealing with the response to output the response data to a div?

Just to summarise everything:

How do I submit a form using vue js and vue-resource instead of my usual jQuery way?
Using a response from ajax, how can I output data into a div preferably using components?

scrubmx · Accepted Answer · 2017-01-03 00:54:42Z

9

I used this approach and worked like a charm:

event.preventDefault();

let formData = new FormData(event.target);

formData.forEach((key, value) => console.log(value, key));

answered Jan 3, 2017 at 0:54

scrubmx

2,54621 silver badges25 bronze badges

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

2 Comments

André Duarte Over a year ago

var data = {}; formData.forEach(function(v,k) { data[k]=v; });

COil Over a year ago

Plus one for the last line to quickly debug values inside the formData object, very useful.

Nimantha · Accepted Answer · 2021-11-08 05:13:22Z

8

In order to get the value from input you have to use v-model Directive

1. Blade View

<div id="app">
<form v-on="submit: search">
    <div class="form-group">
        <input type="text" v-model="id" class="form-control" placeholder="id" required="required">
    </div>
    
    <input type="submit" class="btn btn-default" value="Search">
</form>
</div>

<script type="text/javascript">

// get route url with blade 
var url = "{{route('formRoute')}}";

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');


var app = new Vue({
    el: '#app',
    data: {
        id: '',
        response: null
    },
    methods: {
        search: function(event) {
            event.preventDefault();
            
            var payload = {id: this.id};

            // send get request
            this.$http.get(url, payload, function (data, status, request) {

            // set data on vm
            this.response = data;

            }).error(function (data, status, request) {
                // handle error
            });
        }
    }
});
</script>

If you want to pass data to component the use 'props' see docs for more info

http://vuejs.org/guide/components.html#Passing_Data_with_Props

If you want use laravel and vuejs together, then checkout

https://laracasts.com/series/learning-vuejs

edited Nov 8, 2021 at 5:13

Nimantha

6,5276 gold badges32 silver badges78 bronze badges

answered Jul 28, 2015 at 14:02

Anish Dcruz

5352 gold badges5 silver badges8 bronze badges

1 Comment

Lorenzo Gangi Over a year ago

I think you might want to use @submit="search" or v-on:submit="search" on your form tag. At least for Vue 2.0 vuejs.org/v2/guide/events.html

Samuel De Backer · Accepted Answer · 2019-04-23 12:26:29Z

7

Add v-model="id" on your text input

then add it to your data object

new Vue({
    el: '#someId',

    data: {
        id: ''
    },

    methods: {
        search: function(e) {
            e.preventDefault();

            var req = this.$http.get(
                '/api/search?id=' + this.id,
                function (data, status, request) {
                    console.log(data);
                }
            );
        }
    }
});

It’s better to remove v-on="click: search" and add v-on="submit: search" on the form tag.
You should add method="GET" on your form.
Make sure you have #someId in your html markup.

edited Apr 23, 2019 at 12:26

answered Jul 28, 2015 at 13:57

Samuel De Backer

3,4602 gold badges28 silver badges39 bronze badges

1 Comment

Todd German Over a year ago

with the new updated syntax you can use @submit="search"

Collectives™ on Stack Overflow

Submitting form in Vue.js with ajax

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related