web-dev-qa-db-fra.com

Envoi du formulaire dans Vue.js avec ajax

Je suis vraiment coincé sur la façon dont je travaillerais en soumettant un formulaire qui fait une demande ajax en utilisant Vue.js et vue-resource puis en utilisant la réponse pour remplir un div.

Je fais ça de projet en projet avec js/jQuery comme ceci:

vue dans la lame

{!! 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']);
        }
    );
});

Ce que j'ai fait/essayé jusqu'à présent dans Vue.js:

vue dans la lame

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

Je me demande s'il est possible d'utiliser des composants lors du traitement de la réponse pour sortir les données de réponse vers un div?

Juste pour tout résumer:

  1. Comment envoyer un formulaire en utilisant vue js et vue-resource au lieu de ma façon habituelle jQuery?
  2. En utilisant une réponse d'ajax, comment puis-je sortir des données dans une div en utilisant de préférence des composants?

Toute aide à ce sujet serait très appréciée, merci.

javascriptlaravelvue.js
15
haakym

  1. Ajouter v-model="id" sur votre saisie de texte

  2. puis ajoutez-le à votre objet de données

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

  3. Il vaut mieux supprimer v-on="click: search" et ajouter v-on="submit: search" sur la balise de formulaire.

  4. Vous devez ajouter method="GET" sur votre formulaire.
  5. Assurez-vous que vous avez #someId dans votre balisage html.
7
Samuel De Backer

Pour obtenir la valeur de l'entrée, vous devez utiliser la directive v-model

1. Vue de la lame 

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

Si vous souhaitez transmettre des données au composant, utilisez les `` accessoires '', consultez la documentation pour plus d'informations.

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

Si vous voulez utiliser laravel et vuejs ensemble, alors passez à la caisse

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

J'espère que ça t'aide!

6
Anish Dcruz

J'ai utilisé cette approche et travaillé comme un charme:

event.preventDefault();

let formData = new FormData(event.target);

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