获取所有输入值 - Vuejs答案

【问题标题】：Get all Input values - Vuejs获取所有输入值 - Vuejs
【发布时间】：2019-02-26 12:44:53
【问题描述】：

我在一个简单的 VueJs 应用程序中有多个 input 元素。但我没有和表单元素。现在我想一次获取所有输入值并发送到服务器端 [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!
}

【问题讨论】：

嗯，取决于你希望输出是什么？关于对象、数组、...？
数组可以，但是每次页面的输入都是完全不同的并且是动态的

标签： vue.js vuejs2 vue-component

【解决方案1】：

如何将所有内容存储在一个方便的 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。

【讨论】：

我不能硬编码任何东西，因为一切都是动态的，如问题中所述
@Rehan 你是什么意思？你的问题中没有提到任何这样的事情
@Rehan 我已经更新了我的答案，使其更像你的问题

【解决方案2】：

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

【讨论】：

我有一个庞大的表格，其中每个部分都由其特定组件创建；这是我从表单中获取所有数据的唯一方法。 Tks 男人！

【解决方案3】：

将输入绑定到 Vues data 选项：

new Vue({
  el: "#app",
  data: {
    myArray: [null, null, null, null]
  },
  methods: {
    getAllData() {
      console.log(this.myArray)

      // send to server
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div>
    <input v-for="(arr, index) in myArray" v-model="myArray[index]" @key="index" placeholder="edit me">
  </div>

  <div>
<button type="button" @click="getAllData">Send</button>
  </div>
</div>

【讨论】：