Get all Input values - Vuejs

Question

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

Well, depends what would you like for the output to be? On object, array, ... ? — Vucko
– Vucko, Commented Feb 26, 2019 at 12:49
Array would be fine but everytime the page the inputs are totally different and dynamic — Rehan
– Rehan, Commented Feb 26, 2019 at 12:50

Phil · Accepted Answer · 2019-02-26 23:42:06Z

9

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.

edited Feb 26, 2019 at 23:42

answered Feb 26, 2019 at 12:57

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rehan Over a year ago

I can't hardcode anything as everything is dynamic as stated in the question

Phil Over a year ago

@Rehan what do you mean? You have not mentioned any such thing in your question

Phil Over a year ago

@Rehan I've updated my answer to be more like your question

Rahman Rezaee · Accepted Answer · 2020-07-20 11:36:38Z

4

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

edited Jul 20, 2020 at 11:36

answered Jul 20, 2020 at 11:28

Rahman Rezaee

2,15020 silver badges26 bronze badges

1 Comment

Nowdeen Over a year ago

I have a massive form in which each section is created by its specific component; that was the only way I did achieve to get all data from the form. Tks men!

Vucko · Accepted Answer · 2019-02-26 16:08:17Z

1

Bind the inputs to Vues data option:

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>

edited Feb 26, 2019 at 16:08

answered Feb 26, 2019 at 12:55

Vucko

20.9k12 gold badges60 silver badges108 bronze badges

Collectives™ on Stack Overflow

Get all Input values - Vuejs

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related