Javascript 独立阵列推入式Vuejs

我试图从对象中获取值，并使用Vue将其推入数组。每次单击我的项目时，我想将每个值分成不同的数组。我每次点击todo都应该推到不同的数组中，我怎么能分开推到不同的数组中呢

newvue({
el:“应用程序”，
数据：{
待办事项：[
{text:“学习JavaScript”}，
{文本：“学习Vue”}，
{text:“在JSFiddle中玩”}，
{文本：“构建一些很棒的东西”}
],
mytodo:[]
},
方法：{
myClickTodo:函数（e）{
this.mytodo.push（e.target.innerText）
console.log（e.target.innerText）
}
}
})

我的清单一：


{{todo.text+”来自todo one}}


待办事项1

{{mytodo}}


我的清单二：


{{todo.text+”从todo two“}}


待办事项2

{{mytodo}}

快速修复 一种解决方案是将

mytodos

更改为2个数组的数组（每个TODO列表一个）：

然后，更新

单击

-handler以传递

mytodos

的特定数组元素以及要添加的

todo

项：

<!-- 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)">

newvue({
el:“#应用程序”，
数据：（）=>({
待办事项：[
{text:“学习JavaScript”}，
{文本：“学习Vue”}，
{text:“在JSFiddle中玩”}，
{文本：“构建一些很棒的东西”}
],
mytodo:[]，[]
}),
方法：{
myClickTodo（mytodo，todo）{
mytodo.push（todo.text）；
console.log（todo.text）；
}
}
})

我的清单一：


{{todo.text+”来自todo one}}


待办事项1

{{mytodo[0]}


我的清单二：


{{todo.text+”从todo two“}}


待办事项2

{{mytodo[1]}

但您没有两个数组-只有一个数组存储在Vue应用程序的

mytodo

属性中！要实现您想要的功能，可以制作两个数组，或者创建一个组件

todo

，然后在应用程序中使用两个its实例。

<!-- 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)">

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