Is there a way to just post the entire form, instead of having to specify the fields? I thought I had seen it somewhere but can't find it now.
A bit like this in JQuery:
$.ajax({
data: $("form").serialize(),
//etc.
});
This is in Vue.js component.
Mick
One possible solution is to use v-model
with object as mentioned by @MU.
Apart from v-model
, you can also use native FormData object, for example when you have dinamically created inputs and you can't/don't want to bind these inputs using v-model
:
new Vue({
el: '#app',
methods: {
submit: function () {
const formData = new FormData(this.$refs['form']); // reference to form element
const data = {}; // need to convert it before using not with XMLHttpRequest
for (let [key, val] of formData.entries()) {
Object.assign(data, { [key]: val })
}
console.log(data);
axios.post('https://jsonplaceholder.typicode.com/posts', data)
.then(res => console.log(res.request.response))
}
}
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
<form ref="form" @submit.prevent="submit">
<input type="text" name="name">
<input type="number" name="age">
<button type="submit">Submit</button>
</form>
</div>
v-model
for all form fields. https://vuejs.org/v2/guide/forms.html
data()
object called form
or something similar and use v-model='form.fieldName'
this.axios.post('url', this.form).then(...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With