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

Why are you doing forEach then?

connexo
– connexo

2018-08-22 07:55:59 +00:00
Commented Aug 22, 2018 at 7:55 — connexo
– connexo, Commented Aug 22, 2018 at 7:55
so what is your suggestion ? .map maybe ?

Swilam Muhammad
– Swilam Muhammad

2018-08-22 07:58:12 +00:00
Commented Aug 22, 2018 at 7:58 — Swilam Muhammad
– Swilam Muhammad, Commented Aug 22, 2018 at 7:58

Community · Accepted Answer · 2020-06-20 09:12:55Z

6

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 22, 2018 at 7:59

Allkin

1,0989 silver badges18 bronze badges

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

1 Comment

Swilam Muhammad Over a year ago

Perfect, Thanks very much @Allkin.

Jan · Accepted Answer · 2018-08-22 08:03:41Z

1

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.

answered Aug 22, 2018 at 8:03

Jan

1848 bronze badges

Comments

Daniyal Lukmanov · Accepted Answer · 2018-08-22 14:19:57Z

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

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related