javascript - Vue.js adding an element to an array from another array - Stack Overflow

admin管理员组

文章数量:1332600

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>

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

• javascript
• arrays
• vue.js

Share Follow asked Aug 22, 2018 at 7:48 Swilam MuhammadSwilam Muhammad 13333 silver badges1414 bronze badges 2

• 1 Why are you doing forEach then? – connexo Commented Aug 22, 2018 at 7:55
• so what is your suggestion ? .map maybe ? – Swilam Muhammad Commented Aug 22, 2018 at 7:58

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

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.

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

本文标签： javascriptVuejs adding an element to an array from another arrayStack Overflow