2015-07-28 20 views
11

Sono davvero bloccato su come vorrei lavorare con l'invio di un modulo che fa una richiesta Ajax utilizzando Vue.js e Vue-risorsa quindi utilizzando la risposta per riempire un div.Invio modulo in Vue.js con ajax

faccio questo da progetto a progetto con js/jQuery come questo:

vista lama

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

quello che ho fatto/provato finora in Vue.js:

vista lama

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

Mi chiedo se è possibile utilizzare i componenti quando si tratta con la risposta per l'uscita dei dati di risposta ad un div?

Giusto per riassumere tutto:

  1. Come invio un form utilizzando js VUE e vue di risorse invece del mio solito modo jQuery?
  2. Utilizzando una risposta da ajax, come posso inviare i dati in un div usando preferibilmente i componenti?

Qualsiasi aiuto su questo sarebbe molto apprezzato, grazie.

risposta

3
  1. Aggiungi v-model="id" sul vostro input di testo

  2. quindi aggiungerlo ai vostri dati oggetto

    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. E 'forse meglio per rimuovere v-on="click: search" e aggiungere v-on="submit: search" su si forma tag.

  4. È necessario aggiungere method="GET" nel modulo html.
  5. Assicurati di avere #someId nel tuo codice html.
+0

con la nuova sintassi aggiornato è possibile utilizzare '@ submit = "search"' –

5

Al fine di ottenere il valore da input è necessario utilizzare la direttiva v-modello

1.Lama 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> 

Se si desidera passare i dati al componente all'uso 'puntelli' vedi documentazione per ulteriori informazioni

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

Se si desidera utilizzare laravel e vuejs insieme, poi checkout

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

Spero che questo sia utile per voi!

+2

penso che si potrebbe desiderare di utilizzare @ submit = "search" o v-on: submit = "cerca" sul tag del modulo. Almeno per Vue 2.0 https://vuejs.org/v2/guide/events.html –

+0

@LorenzoGangi: questa è una buona osservazione !! – kartik

1

Ho usato questo approccio e ha lavorato come un fascino:

event.preventDefault(); 

let formData = new FormData(event.target); 

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

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