I am attempting to extract data from an object and store it in an array using Vue. My goal is to have each value stored in a separate array every time I click on an item. Each click should push the todo into a different array. How can I achieve this separation for pushing into different arrays?
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>