Separate Array push in Vuejs

Question

I am trying to get value from object and push into array using Vue. I wanted to separate every value when into different array every time I click my item. Every time I click todo should be push on different array, how I can separate to push into different array

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript"},
      { text: "Learn Vue"},
      { text: "Play around in JSFiddle"},
      { text: "Build something awesome"}
    ],
    mytodo:[]
  },
  methods: {
  	myClickTodo: function(e){
    	this.mytodo.push(e.target.innerText) 
    	console.log(e.target.innerText)
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <h2>My list One:</h2>
  <ul>
    <li v-for="todo in todos" @click="myClickTodo">
      {{ todo.text + " from todo one" }}
    </li>
  </ul>

  <p>todo 1 </p>
  <p>{{mytodo}}</p>

<hr>

<h2>My list Two:</h2>
  <ul>
    <li v-for="todo in todos" @click="myClickTodo">
      {{ todo.text + " from todo two" }}
    </li>
  </ul>


  <p>todo 2</p>
  <p>{{mytodo}}</p>
</div>

Answer 1

Quick fix

One solution is to change mytodos into an array of 2 arrays (one for each TODO list):

data() {
  return {
    mytodo: [[], []]
  };
}

Then, update your click-handler to pass the specific array element of mytodos along with the todo item to be added:

<!-- My list One -->
<li v-for="todo in todos" @click="myClickTodo(mytodos[0], todo)">

<!-- My list Two -->
<li v-for="todo in todos" @click="myClickTodo(mytodos[1], todo)">

And update myClickTodo to handle these new arguments:

methods: {
  myClickTodo(mytodo, todo) {
    mytodo.push(todo.text);
  }
}

new Vue({
  el: '#app',
  data: () => ({
    todos: [
      { text: "Learn JavaScript"},
      { text: "Learn Vue"},
      { text: "Play around in JSFiddle"},
      { text: "Build something awesome"}
    ],
    mytodo: [[], []]
  }),
  methods: {
    myClickTodo(mytodo, todo) {
      mytodo.push(todo.text); 
      console.log(todo.text);
    }
  }
})

<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
  <h2>My list One:</h2>
  <ul>
    <li v-for="todo in todos" @click="myClickTodo(mytodo[0], todo)">
      {{ todo.text + " from todo one" }}
    </li>
  </ul>

  <p>todo 1 </p>
  <p>{{mytodo[0]}}</p>

  <hr>

  <h2>My list Two:</h2>
  <ul>
    <li v-for="todo in todos" @click="myClickTodo(mytodo[1], todo)">
      {{ todo.text + " from todo two" }}
    </li>
  </ul>


  <p>todo 2</p>
  <p>{{mytodo[1]}}</p>
</div>

Components

A cleaner solution is to encapsulate the TODO list into a reusable component (e.g., named "my-list"):

Vue.component('my-list', {
  data: () => ({
    title: '',
    mytodo: [],
  }),
  props: {
    todos: {
      type: Array,
      default: () => []
    }
  },
  template: `<div>
    <h2>{{title}}</h2>
      <ul>
        <li v-for="todo in todos" @click="myClickTodo(mytodo, todo)">
          {{ todo.text + " from todo one" }}
        </li>
      </ul>

      <p>{{mytodo}}</p>
    </div>`,
  methods: {
    myClickTodo(mytodo, todo) {
      mytodo.push(todo.text);
      console.log(todo.text);
    }
  }
});

...which would allow you to simplify your app template to this:

<my-list title="My List One:" :todos="todos"></my-list>
<my-list title="My List Two:" :todos="todos"></my-list>

Vue.component('my-list', {
  data: () => ({
    mytodo: [],
  }),
  props: {
    title: '',
    todos: {
      type: Array,
      default: () => []
    }
  },
  template: `<div>
      <h2>{{title}}</h2>
      <ul>
        <li v-for="todo in todos" @click="myClickTodo(mytodo, todo)">
          {{ todo.text + " from todo one" }}
        </li>
      </ul>

      <p>{{mytodo}}</p>
    </div>`,
  methods: {
    myClickTodo(mytodo, todo) {
      mytodo.push(todo.text);
      console.log(todo.text);
    }
  }
});

new Vue({
  el: '#app',
  data: () => ({
    todos: [
      { text: "Learn JavaScript"},
      { text: "Learn Vue"},
      { text: "Play around in JSFiddle"},
      { text: "Build something awesome"}
    ],
  }),
})

<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
  <my-list title="My List One:" :todos="todos"></my-list>
  <my-list title="My List Two:" :todos="todos"></my-list>
</div>