vue js get multiple values from inputs

Question

So I have 2 blocks of HTML, each containing 2 input fields and when submitting the form, I want to get all values from the inputs, and then create an object from the values... As of know I've done it with plain vanilla JS and it works as it should, however if feels like to touching the DOM a bit to much, and also are very much depending on a specific DOM struckture, and therefore I was thinking there must be a better way, the VUE way so to speak, however im a bit stuck on how to do this the VUE way, which is why posting the question here in hope of getting some useful tips :)

HTML:

<form novalidate autocomplete="off">
  <div class="input-block-container">
    <div class="input-block">
      <input type="text" placeholder="Insert name" name="name[]" />
      <input-effects></input-effects>
    </div>
    <div class="input-block">
      <input type="email" placeholder="Insert email address" name="email[]" />
      <input-effects></input-effects>
    </div>
  </div>
  <div class="input-block-container">
    <div class="input-block">
      <input type="text" placeholder="Insert name" name="name[]" />
      <input-effects></input-effects>
    </div>
    <div class="input-block">
      <input type="email" placeholder="Insert email address" name="email[]" />
      <input-effects></input-effects>
    </div>
  </div>
  <button class="button button--primary" @click.prevent="sendInvites"><span>Send</span></button>
</form>

JS:

methods: {
    createDataObject() {

      let emailValues = document.querySelectorAll('input[type="email"]');

      emailValues.forEach((email) => {
        let name = email.parentNode.parentNode.querySelector('input[type="text"]').value;
          if(email.value !== "" && name !== "") {
            this.dataObj.push({
              email: email.value,
              name
            });
          }
      });

      return JSON.stringify(this.dataObj);

    },
    sendInvites() {
        const objectToSend = this.createDataObject();

        console.log(objectToSend);

        //TODO: Methods to send data to server


    }
}

Alexandr Suleymanov · Accepted Answer · 2017-06-09 10:29:56Z

1

You can provide data properties for each of your inputs if you have static content.

data: function() {
   return {
      name1: '',
      email1: '',
      name2: '',
      email2: ''
   }
}

Then use them in your template:

<input type="text" placeholder="Insert name" v-model="name1" />

Access in method by this.name1

edited Jun 9, 2017 at 10:29

answered Jun 9, 2017 at 10:11

Alexandr Suleymanov

3633 silver badges11 bronze badges

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

Comments

Matthew · Accepted Answer · 2019-02-21 18:47:32Z

0

Try this

<div id="app">
   <h1> Finds </h1>
     <div v-for="find in finds">
       <input name="name[]" v-model="find.name">
       <input name="email[]" v-model="find.email">
     </div>
    <button @click="addFind">
      New Find
    </button>
  <pre>{{ $data | json }}</pre>
</div>

Vue Component

new Vue({
  el: '#app',
  data: {
    finds: []
  },
  methods: {

    addFind: function () {
      this.finds.push({ name: '', email: '' });
    }
    enter code here

  }
});

answered Feb 21, 2019 at 18:47

Matthew

3192 silver badges7 bronze badges

Collectives™ on Stack Overflow

vue js get multiple values from inputs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related