Javascript 2个阵列中的反应对象

我有一个对象数组（数组1），可以切换到另一个数组（数组2）。添加后，用户可以选择为每个选项键入文本字段。切换工作正常，在初始创建时是被动的。但如果数组2中已有数据，则该项不再是被动的

我制作了一个快速的JSFIDLE来演示：事件1和3是被动的，但是事件2不再是newEvents数组中已经存在的事件。是否有方法将此连接到原始事件

newvue({
el:“应用程序”，
数据：{
活动：[
{id:1，文本：“事件1”}，
{id:2，文本：“事件2”}，
{id:3，文本：“事件3”}
],
savedEvents：[
{id:2，文本：“事件2”，注释：“事件注释”}
]
},
方法：{
toggleEvent：函数（事件）{
让index=this.savedEvents.findIndex（e=>e.id==event.id）；
如果（索引！=-1）{
这个.savedEvents.splice（索引，1）；
}否则{
this.savedEvents.push（事件）；
}
},
inArray:函数（id）{
返回这个.savedEvents.some（obj=>obj.id==id）；
}
}
})

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#应用程序{
背景：#fff；
边界半径：4px；
填充：20px；
过渡：均为0.2s；
}
李{
利润率：8px0；
}
氢{
字体大小：粗体；
边缘底部：15px；
}
.btn{
显示：内联块；
填充物：5px；
边框：1px实心#666；
边界半径：3px；
边缘底部：5px；
光标：指针；
}
输入[类型=文本]{
填充物：5px；
}
}

活动：

{{event.text}

保存的事件：


{{event.text}{{event.notes}

尝试使用

$set

和

$delete

避免反应性损失

---

这里的问题与反应性无关

通过单击按钮将事件添加到

newEvents

时，它使用的对象与

events

中的对象相同。因为每个事件只有一个对象，所以一切正常

在事件2的情况下，您从两个表示相同事件的独立对象开始，一个在

events

中，另一个在

newEvents

中。对其中一个的更改不会更改另一个

在不知道您选择这些数据结构的动机的情况下，很难说什么是合适的解决方案，但下面的示例确保两个数组都包含事件2的相同对象

与原始代码相比，我唯一更改的是

data

函数

newvue({
el:“应用程序”，
数据（）{
常数数据={
活动：[
{id:1，文本：“事件1”}，
{id:2，文本：“事件2”，注释：“事件注释”}，
{id:3，文本：“事件3”}
],
新事件：[]
}
data.newEvents.push（data.events[1]）
返回数据
},
方法：{
toggleEvent：函数（事件）{
让index=this.newEvents.findIndex（e=>e.id==event.id）；
如果（索引！=-1）{
this.newEvents.splice（索引，1）；
}否则{
this.newEvents.push（事件）；
}
},
inArray:函数（id）{
返回this.newEvents.some（obj=>obj.id==id）；
}
}
})

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#应用程序{
背景：#fff；
边界半径：4px；
填充：20px；
过渡：均为0.2s；
}
李{
利润率：8px0；
}
氢{
字体大小：粗体；
边缘底部：15px；
}
.btn{
显示：内联块；
填充物：5px；
边框：1px实心#666；
边界半径：3px；
边缘底部：5px；
光标：指针；
}
输入[类型=文本]{
填充物：5px；
}
}

活动：

{{event.text}

新活动：


{{event.text}{{event.notes}

正如@skille所指出的，列表数组中的对象需要被推送到第二个数组中，它才是被动的。我已经解决了这个问题，通过循环并匹配id，然后将这个对象推到第二个数组中。不确定这是否是最好/最有效的方法，但它现在起作用了

newvue({
el:“应用程序”，
数据：{
事件列表：[
{id:1，文本：“事件1”}，
{id:2，文本：“事件2”}，
{id:3，文本：“事件3”}
],
savedEvents：[
{id:2，文本：“事件2”，注释：“事件注释”}
]
},
安装的（）{
this.init（）；
},
方法：{
init:function（）{
设_temp=this.savedEvents；
this.savedEvents=[]；
_每小时温度（事件=>{
this.eventsList.forEach（x=>{
if（event.id==x.id）{
此.$set（x，“notes”，event.notes）；
这个.savedEvents.push（x）；
}
});
});
},
toggleEvent：函数（事件）{
让index=this.savedEvents.findIndex（e=>e.id==event.id）；
如果（索引！=-1）{
这个.savedEvents.splice（索引，1）；
}否则{
this.savedEvents.push（事件）；
}
},
inArray:函数（id）{
返回这个.savedEvents.some（obj=>obj.id==id）；
}
}
})

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#应用程序{
背景：#fff；
边界半径：4px；
填充：20px；
过渡：均为0.2s；
}
李{
利润率：8px0；
}
氢{
字体大小：粗体；
边缘底部：15px；
}
.btn{
显示：内联块；
填充物：5px；
边框：1px实心#666；
边界半径：3px；
边缘底部：5px；
光标：p