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/[email protected]"></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/[email protected]"></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>
mytodoproperty of Vue application! To implement what you want, either make two arrays - or, better, create a componenttodothen use two its instances in your app.