javascript - Vue.js 将一个元素从另一个数组添加到一个数组

Question

我想将一个元素添加到 Vue 实例内的数据函数中的数组中，该元素来 self 在方法对象中的单独方法中创建的另一个数组，这是我的代码

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>

现在，每当我单击“添加项目”按钮时，它都会立即添加所有名称，这显然不是我想要的行为，我想一次添加一个名称。提前致谢

Answer 1

这个fiddle展示了一种实现方法

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

首先，您应该将 funnyPeople 存储为 data 选项中的 Prop ，而不是在每次访问 addItem 方法时重新声明它.

我的方法从 funnyPeople 数组中获取第一个元素，将其推送到 names 数组中，然后从 funnyPeople 数组中将其删除。

这只是众多方法之一。