Javascript 如何解决vuetify'；谁的扩展面板？

上下文：

我目前正在开发一个使用vuetify（）扩展面板的复杂应用程序， 在这里，我需要绑定/突出显示基于展开面板的画布。（在下面的演示中，我用v-chip而不是canvas重新创建了相同的问题）

为了实现上述目标，我遵循以下步骤

S1:在v型上计算得到的是扩展/用户扩展的扩展面板索引

S2:将索引与项目索引匹配，并突出显示元素

需要注意的事情很少：

1.无法使用项索引作为扩展面板的键，因为它会降低性能，重新呈现整个扩展面板组件

2.无法对面板v型使用布尔数组，因为我需要索引来突出显示正确的v型芯片

问题：

当我尝试向扩展面板使用的items数组添加/推送新元素时，错误的canvas/v-chip突出显示

这似乎是一个存在的问题，现报告如下：

这个问题有解决办法吗

newvue({
el:“#应用程序”，
数据（）{
返回{
专家组：0，
项目：[{
姓名：“三”
}, {
姓名：“两个”
}, {
姓名：“一”
}],
已选择索引：0
}
},
方法：{
附加项（）{
此为.items.unshift({
名称：`Infinity${this.items.length+1}`
})
}
},
观察：{
面板（值）{
//如果（值）{
this.selectedIndex=值；
//   }
}
}
})

表格{
最大宽度：80px；
最大高度：68px；
字体大小：10px；
背景色：#ffd23f；
}

项目索引
选定索引
轮廓
{{i}
{{selectedIndex}}
{{i！=selectedIndex}
添加
项目{{Item.name}
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。
{{item.name}

我想这就是你想要做的。我做了一些小的改变-我将推到项目数组而不是取消移动。如果您希望将新项保持在顶部，我建议您颠倒数组的顺序。我删除了watcher并为setNewIndex添加了一个新方法。我还将

I

打印到屏幕上的几个位置，以便更容易理解

newvue({
el:“#应用程序”，
数据（）{
返回{
专家组：0，
项目：[{
姓名：“三”
}, {
姓名：“两个”
}, {
姓名：“一”
}],
已选择索引：0
}
},
方法：{
附加项（）{
让添加=this.items.length
这个。项目。推({
名称：`Infinity${added}`
})
log（{added}）；
此.setNewIndex（已添加）
},
setNewIndex（一）{
this.selectedIndex=i+“\u selected”；
}
},
观察：{
}
})

表格{
最大宽度：80px；
最大高度：68px；
字体大小：10px；
背景色：#ffd23f；
}

项目索引
选定索引
轮廓
{{i}
{{selectedIndex}}
{{i+''u selected'！=selectedIndex}
添加
{{selectedIndex}}
项目{{i}{{Item.name}
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。
{{i}}{{item.name}