Vue store multiple values as an array

Question

Is there a way to store multiple values in data return when its been submitted.

View

<div id="app">
  <input type="text" v-model="inserted" placeholder="Insert Name">
  <button type="submit" v-on:click='submit();'>SUBMIT</button>
</div>

Script

new Vue({
  el: "#app",
  data: {
   inserted:[], /** each name submitted should be stored over here **/
   /** if the first name was submitted as DAVID and second name was submitted as JOHN **/
   /** inserted[] should consists of both values as ["DAVID", "JOHN"] **/
  },
  methods: {
    submit(){
    console.log('value submitted');
    }
  }
})

Below is my code on JSFIDDLE

https://jsfiddle.net/ujjumaki/ypbc2vf6/12/

Nino Filiu · Accepted Answer · 2020-05-19 16:17:33Z

2

Sure, just bind your input to a toInsert data property instead, and push it to inserted on submit:

<input v-model="inserted">
<button @click="submit">submit</button>

new Vue({
  data: {
    inserted: [],
    toInsert: '',
  },
  methods: {
    submit() {

      // save the value
      this.inserted.push(this.toInsert);

      // clean the input
      this.toInsert = '';

    }
  }
});

answered May 19, 2020 at 16:17

Nino Filiu

18.9k11 gold badges65 silver badges97 bronze badges

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

Comments

Patrick Artner · Accepted Answer · 2020-05-19 16:47:39Z

Took me longer then Nino but here is a working full example with some added validation so you do not add empty names:

You can create the input for some other kind of vue variable, f.e. name. In submit() you add that to your array if it is not empty:

new Vue({
  el: "#app",
  data: {
   inserted:[], /* each name submitted should be stored over here */
   /* if the first name was submitted as DAVID and second name was submitted as JOHN*/
   /* inserted[] should consists of both values as ["DAVID", "JOHN"] */
   name: "",
  },
  methods: {
  	submit() {
      if (this.name.length > 0) { 
        this.inserted.push(this.name);
    }
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="array" v-model="name" placeholder="Insert Name">
  <button type="submit" @click='submit();'>SUBMIT</button>
  
  <p>Message is: {{ inserted }}</p>
</div>

Collectives™ on Stack Overflow

Vue store multiple values as an array

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