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:
- Come invio un form utilizzando js VUE e vue di risorse invece del mio solito modo jQuery?
- 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.
con la nuova sintassi aggiornato è possibile utilizzare '@ submit = "search"' –