我有多个input简单 VueJs 应用程序中的元素。但我没有 和 表单元素。现在我想一次获取所有输入值并发送到服务器端[laravel]进行处理？
<div>
<input v-model="foo-bar" placeholder="edit me">
<input v-model="bar-foo" placeholder="edit me">
<input v-model="foo-foo" placeholder="edit me">
<input v-model="bar-bar" placeholder="edit me">
</div>
<div>
<input type="button" @click="getAllData">Send</input>
</div>
getAllData(){
// I have no idea how to get all at once!
}
把所有东西都存放在方便的地方怎么样？form对象，例如
new Vue({
el: '#app',
data: {
form: {} // create an object to hold all form values
},
methods: {
getAllData() {
console.info(this.form)
// axios.post('/some/url', this.form)
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<div>
<input v-model="form['foo-bar']" placeholder="edit me">
<input v-model="form['bar-foo']" placeholder="edit me">
<input v-model="form['foo-foo']" placeholder="edit me">
<input v-model="form['bar-bar']" placeholder="edit me">
</div>
<div>
<button type="button" @click="getAllData">Send</button>
</div>
</div>
正如您在演示中看到的，您所需要做的就是参考this.form对于所有的值。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
