Javascript 使用Vue JS为阵列中的每个卡创建具有模式的卡

我正在使用v-for从阵列中成功创建6张卡。 问题是，我还试图为每张卡创建一个模式，其中包含每张卡的唯一卡详细信息。对于exmaple：卡片的标题、链接、作者、img、Modal内的类别

我能够生成Modals，但它显示了所有卡的第一张卡的详细信息

如果你看小提琴，你可以看到这一点

如何为每张卡生成一个具有其自身卡详细信息的模式

我使用的是bootstrap4

类项目{
构造器（标题、链接、作者、img、类别）{
this.title=标题，
this.link=link，
this.author=作者，
this.img=img，
this.category=类别
}
}
新Vue({
el:“#应用程序”，
数据：{
currentFilter:'所有'，
项目列表：[
新项目(
“电子商务”，
'#', 
"甜品工具",，
'https://placeimg.com/460/180/any',
“设计”
),
新项目(
‘比特币管理’，
'https://digitalassetmanagement.com/', 
“加宽”，
'https://placeimg.com/420/180/any',
“设计”
),
新项目(
“登录页”，
'https://meet-a-geek.today/', 
“Contenforces”，
'https://placeimg.com/430/180/any',
“发展”
),
新项目(
“在线培训”，
'https://www.smarttraining.com/', 
“智能培训LCC”，
'https://placeimg.com/440/180/any',
“发展”
),
新项目(
“大学与工地门户”，
'https://micencostagebank.nl/index_september.php', 
“Contenforces”，
'https://placeimg.com/470/180/any',
“合作”
),
新项目(
“产品漏斗”，
'http://prettyexcellent.com/applecider/', 
“A.A.罗恩”，
'https://placeimg.com/480/180/any',
“发展”
)
], 
},
方法：{
setFilter：函数setFilter（filter）{
this.currentFilter=过滤器；
} 
}
});
。小节subnav{
/*保证金：保证金xl 0*/
} 
.头衔{
文本对齐：居中；
/*字体大小：$font lg*/
字体大小：正常；
/*填充：$sm0*/
}
.子菜单{
文本对齐：居中；
/*字体大小：$font sm*/
/*保证金底部：$margin md*/
}
.filter{
填充：6px 6px；
光标：指针；
边界半径：6px；
过渡：所有0.35秒；
}
.filter.active{
盒影：0px 1px 3px 0px 00000026；
}
.过滤器：悬停{
背景：浅灰色；
}     
.项目{
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
p{
文本对齐：居中；
/*字体大小：$font sm；*/
}
a{
/*字体大小：$font sm*/
颜色：#fff；
}
.项目留给{
变换：translatey（30px）；
不透明度：0；
}
.项目{
过渡：所有.35都易于输入输出；
利润率：0.10px；
宽度：250px；
高度：自动；
过渡：所有.35都易于输入输出；
}
.项目形象{
最大宽度：100%；
高度：自动；
}
.项目说明{
利润率：20px 10px；
文本对齐：居中；
}

项目
全部的
设计
发展
协作
{{project.title}
接近
{{project.title}
查看详细信息
首先，您有重复的v-for，因此应该从模态元素中删除v-for

模态在循环中，因此DOM中的每个项目都有一个隐藏的模态元素。它们都有相同的id，即myModal。单击“查看详细信息”时，将显示第一个项目的第一个模式

解决此问题的一种方法是为每个元素添加唯一的模态id。例如，如果我们想在数组中使用项索引，我们可以使用下面的方法来构造id
                    <div class="modal fade" :id="'myModal' + i">
                    <button type="button" :data-target="'#myModal' + i">

:id="'myModal'+ project.id"

 <div class="modal fade" :id="'myModal-'+project.title.replace(/[\W_]+/g,'_')" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true" v-for="project in projectList">
......
<button type="button" class="btn btn-danger" data-toggle="modal" :data-target="'#myModal-'+project.title.replace(/[\W_]+/g,'_')">
                                View Details
                            </button>

v-for="(project, index) in projectList" :id="'myModal-'+index"