title: Vue.js adding an element to an array from another array
body: <p>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</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default {
    data(){
      return {
        names: ['Obama','kenedy','lincolen','bush']
      }
    },
    methods: {
      addItem(){
        let funnyPeople = ['Donald Duck','Tom','Jerry','Donald Trump']
        funnyPeople.forEach(name =&gt; {
          this.names.push(name);
        })
      }
    }
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;ul&gt;
        &lt;li v-for="name in names"&gt;{{ name }}&lt;/li&gt;
      &lt;/ul&gt;
      &lt;button @click="addItem"&gt;add Item&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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</p>