Get value of multiple input fields in v-for loop [Vue.js]

Question

I have a couple of fields, that are rendered through v-for loop:

<div v-for="element in elements" class="uk-form-row uk-margin-small-top">
  <input class="uk-width-1-1 uk-form-small" type="text" placeholder="element" style="width:50%">
</div>

And I need to pass them through a POST request.

elements is just an array, that contains a different number of:

value: ""

and after submitting the form, an array is just a collection of empty objects

How can I change my code to pass an array of values from those fields?

Boussadjra Brahim · Accepted Answer · 2019-01-23 17:46:34Z

Try to bind your inputs to your array items using v-model directive like :

 <div v-for="element in elements" class="uk-form-row uk-margin-small-top">
     <input v-model="element.value" class="uk-width-1-1 uk-form-small" type="text" placeholder="element" style="width:50%">
  </div>

after that you could use your elements array directly in the POST request.

new Vue({
  el: '#app',
  data: {
    elements: []
  },
  methods: {
    addElement: function() {
      this.elements.push({
        value: ''
      });
    }
  }
});

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="app">
  <h1>Elements</h1>
  <div v-for="element in elements">
    <input class="form-control" v-model="element.value" type="text" />
  </div>
  <button class="btn btn-primary" @click="addElement">
    New Element
  </button>
  <pre>{{ $data | json }}</pre>
</div>

Collectives™ on Stack Overflow

Get value of multiple input fields in v-for loop [Vue.js]

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related