有没有办法仅发布整个表单,而不必指定字段?我以为我已经在某个地方看到了它,但现在找不到。
在jQuery中有点像这样:
$.ajax({
data: $("form").serialize(),
//etc.
});
这在vue.js组件中。
mick
一种可能的解决方案是将v-model
与@mu提到的对象一起使用。
除了v-model
外,您还可以使用本机FormData对象,例如,当您使用dinamed Inputs而无法/不想使用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>
- 如果您使用的是VUEJS,则应将
v-model
用于所有表单字段。https://v2.vuejs.s.org/v2/guide/forms.html - 在您的
data()
对象中创建称为form
或类似的对象,并使用v-model='form.fieldName'
- 将所有内容张贴为json,with
this.axios.post('url', this.form).then(...
<form v-on:submit.prevent="getAllData" id="frm">
<input name="input1" placeholder="edit me">
<input name="input2" placeholder="edit me">
<input name="input3" placeholder="edit me">
<input name="input4" placeholder="edit me">
<input type="submit" >Send</input>
</form>
<script>
....
//your method parts
methods:{
getAllData(){
let myForm = document.getElementById('frm');
let formData = new FormData(myForm);
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);
},
}
....
<script>