Vue.js adding an element to an array from another array

Question

I want to add an element to an array in my data function inside the Vue instance, from another array that i create in a separate method in my methods object, Here is my code

 export default { data(){ return { names: ['Obama','kenedy','lincolen','bush'] } }, methods: { addItem(){ let funnyPeople = ['Donald Duck','Tom','Jerry','Donald Trump'] funnyPeople.forEach(name => { this.names.push(name); }) } } } 

 <template> <div> <ul> <li v-for="name in names">{{ name }}</li> </ul> <button @click="addItem">add Item</button> </div> </template> 

Now, whenever I click on the add item button, it add all the name at once, this obviously is not the behavior that I want, I want to add one name at a time. thanks in advance

Answer 1

This fiddle shows one way of doing it

new Vue({
  el: '#app',
   data(){
    return {
      names: ['Obama','kenedy','lincolen','bush'],
      funnyPeople: ['Donald Duck','Tom','Jerry','Donald Trump']
    }
  },
  methods: {
    addItem(){
      if(this.funnyPeople.length > 0) {
        this.names.push(this.funnyPeople[0])
        this.funnyPeople.shift();
      }
    }
  }
})

First of wall you should store the funnyPeople as a prop in data option and not re-declare it each time you access addItem method.

My method gets the first element from the funnyPeople array, pushes it in the names array and then removes it from the funnyPeople array.

This is just one of the many ways to do it.

Answer 2

You could simply take the first element of your array with funnyPeople[0] and always splice the array afterwards using funnyPeople.splice(0, 1) . The downside of this approach is that in the end you have an empty array so you have to check the length of the array. Furthermore, if your array is bigger this is possibly very slow since the array has to be recreated every time. Alternatively, you could work with an index which is incremented every iteration.

Answer 3

Use arr.slice() and additional data.

export default {
  data(){
    return {
      names: ['Obama','kenedy','lincolen','bush'],
      count: 0
    }
  },
  methods: {
    addItem(){
      let funnyPeople = ['Donald Duck','Tom','Jerry','Donald Trump']
      if(this.count < funnyPeople.length) {
          let addItem = funnyPeople.slice(this.count, this.count + 1);
          this.names.push(addItem[0]);
          this.count++
      } else {
         console.log('all items are added');
         return true;
      }
    }
  }
 }

And if you declare finalArray in your data instead doing it inside of your method then use arr.splice() :

export default {
      data(){
        return {
          names: ['Obama','kenedy','lincolen','bush'],
          funnyPeople: ['Donald Duck','Tom','Jerry','Donald Trump']
        }
      },
      methods: {
        addItem(){ 
          if(this.funnyPeople.length) {
              let addItem = funnyPeople.splice(0, 1);
              this.names.push(addItem[0]);
          } else {
             console.log('all items are added');
             return true;
          }
        }
      }
     }