Envoi du formulaire dans Vue.js avec ajax

Je suis vraiment coincé sur la façon dont je souhaite travailler avec la soumission d'un formulaire qui fait une requête ajax à l'aide de Vue.js et de vue des ressources, puis en utilisant la réponse à remplir un div.

Je le fais à partir d'un projet à l'autre avec js/jQuery comme ceci:

vue de 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 de 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 demandais si il est possible d'utiliser des composants lorsqu'ils traitent avec la réponse en sortie les données de réponse à un div?

Juste pour résumer le tout:

  1. Comment dois-je soumettre un formulaire à l'aide de vue js et de la vue-des ressources au lieu de mon habituel jQuery?
  2. À l'aide d'une réponse de l'ajax, comment puis-je sortie de données dans une div de préférence en utilisant des composants?

Toute aide sur ce qui serait le plus apprécié, merci.

source d'informationauteur haakym

  1. 6

    Afin d'obtenir la valeur de l'entrée que vous avez à utiliser le v-modèle de la Directive

    1. Lame De Vue

    <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 à composante de l'utilisation des "accessoires" voir la documentation pour plus d'info

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

    Si vous souhaitez utiliser laravel et vuejs ensemble, puis de la caisse

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

    J'espère que cela est utile pour vous!

  2. 5

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

    2. puis l'ajouter à 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. C'est peut-être préférable de supprimer v-on="click: search" et ajouter v-on="submit: search" sur vous balise form.

    4. Vous devez ajouter method="GET" sur votre formulaire html.
    5. Assurez-vous d'avoir #someId dans votre code html.
  3. 2

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

    event.preventDefault();

let formData = new FormData(event.target);

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