获取所有输入值 - Vuejs [英] Get all Input values - Vuejs

问题描述

我在一个简单的 VueJs 应用程序中有多个 input 元素.但我没有和表单元素.现在我想一次获取所有输入值并发送到服务器端 [laravel] 进行处理?

<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="编辑我">
<div><input type="button" @click="getAllData">发送</input>

获取所有数据(){//我不知道如何一次得到所有！}

解决方案

如何将所有内容存储在一个方便的表单对象中，例如

new Vue({el: '#app',数据: {form: {}//创建一个对象来保存所有表单值},方法: {获取所有数据(){控制台信息(this.form)//axios.post('/some/url', this.form)}}})

<script src="https://cdn.jsdelivr.net/npm/vue"></script><div id="应用程序"><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><button type="button" @click="getAllData">发送</button>

正如您在演示中看到的，您需要做的就是为所有值引用 this.form.

I have multiple input elements in a simple VueJs application. But I don't have and form elements. Now I want to get all the input values at once and send to server-side [laravel] for processing?

<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!
}

解决方案

How about you store everything in a convenient form object, eg

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>

As you can see in the demo, all you need to do is reference this.form for all the values.

这篇关于获取所有输入值 - Vuejs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！