Javascript 如何在每个选项卡上打开不同的模式？

我试图在每个选项卡项上打开一个模式，但该模式仅在第一个选项卡上打开。如果我单击除第一个项目之外的任何项目并尝试打开模式，它将在第一个项目上打开

另一个问题是，添加新项时无法打开模式。启动

选项卡=[]

不起作用。如何解决

看一个例子

---

所有三个选项卡的目标都是相同的模式，通过将id/href更改为“不同”，使其独立/不同

Vue.use（VueTabs）；
新Vue({
el:“应用程序”，
数据：{
选项卡：[“第一个选项卡”、“第二个选项卡”、“第三个选项卡”]
},
方法：{
移除选项卡（索引）{
此.选项卡.拼接（索引，1）
},
addTab（）{
这个.tabs.push（'newtab'）；
var vm=这个；
setTimeout（函数（）{
var elems=document.querySelectorAll（“#modal”+（vm.tabs.length-1））；
M.Modal.init（elems）；
},100);
}
},
安装的（）{
document.addEventListener（'DOMContentLoaded'，function（）{
M.AutoInit（）
var elems=document.querySelectorAll（'.modal'）；
M.Modal.init（elems）；
})
}
})

.tab关闭{
浮动：对；
}
.选项卡关闭：悬停{
变换：旋转（7度）；
}

添加新选项卡
{{tab}}
{{tab}}
模态头
一串文字

明白了。非常感谢你。但是在新添加的项中不打开模式的问题仍然存在。此外，只有当数组开始时非空，模式才会打开。Is tabs=[]它就是不起作用我不明白，它在哪里不起作用？你能在这里检查一下吗？从你的小提琴上分叉：我不知道你想做什么。你读过模式页面了吗？模态通过

.modal trigger

类触发，目标由href设置，该href必须是唯一的（href=“#my-target1”）。然后，相应的模式必须具有匹配的id

，谢谢您的帮助，如果我的评论不太清楚，我很抱歉。你教了很多！请编辑标签并添加具体化，因为您的问题特定于具体化问题。像我在回答问题时所做的那样，始终尝试在问题中添加代码片段。