我正在成功使用v-for从阵列创建6张卡片。 问题是我还试图为每个卡创建一个模态，其中包含每个卡的唯一卡详细信息。例如：卡片的标题，链接，作者，img，模态中的类别
我能够生成模态，但它会显示所有卡的第一张卡的详细信息。
看看小提琴就可以看到这个。
如何为每张具有自己的卡详细信息的卡生成模态？
我正在使用引导程序4
class Project {
constructor(title, link, author, img, category) {
this.title = title,
this.link = link,
this.author = author,
this.img = img,
this.category = category
}
}
new Vue({
el: '#app',
data: {
currentFilter: 'ALL',
projectList: [
new Project (
'Ecommerce',
'#',
'Dessert Tools za',
'https://placeimg.com/460/180/any',
'DESIGN'
),
new Project (
'BITC Management',
'https://digitalassetmanagement.com/',
'Widen',
'https://placeimg.com/420/180/any',
'DESIGN'
),
new Project (
'Landing Page',
'https://meet-a-geek.today/',
'Contenforces',
'https://placeimg.com/430/180/any',
'DEVELOPMENT'
),
new Project (
'Online Training',
'https://www.smarttraining.com/',
'Smart Training LCC',
'https://placeimg.com/440/180/any',
'DEVELOPMENT'
),
new Project (
'Univesity & Jobsite Portal',
'https://micencostagebank.nl/index_september.php',
'Contenforces',
'https://placeimg.com/470/180/any',
'COLABORATION'
),
new Project (
'Product Funnel',
'http://prettyexcellent.com/applecider/',
'A. A. Ron',
'https://placeimg.com/480/180/any',
'DEVELOPMENT'
)
],
},
methods: {
setFilter: function setFilter(filter) {
this.currentFilter = filter;
}
}
});.section-subnav {
/* margin: $margin-xl 0; */
}
.title {
text-align: center;
/* font-size: $font-lg; */
font-weight:normal;
/* padding: $margin-sm 0; */
}
.submenu {
text-align: center;
/* font-size: $font-sm; */
/* margin-bottom: $margin-md; */
}
.filter {
padding: 6px 6px;
cursor: pointer;
border-radius: 6px;
transition: all 0.35s;
}
.filter.active {
box-shadow:0px 1px 3px 0px #00000026;
}
.filter:hover {
background:lightgray;
}
.projects {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
p {
text-align: center;
/* font-size: $font-sm; */
}
a {
/* font-size: $font-sm; */
color: #fff;
}
.projects-leave-to{
transform: translatey(30px);
opacity:0;
}
.project {
transition: all .35s ease-in-out;
margin: 0 10px;
width: 250px;
height: auto;
transition: all .35s ease-in-out;
}
.project-image {
max-width: 100%;
height: auto;
}
.project-description {
margin: 20px 10px;
text-align: center;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="app">
<section class="section-subnav" id="submenu-sec">
<h3 class="title">Projects</h3>
<div class="filters submenu">
<span class="filter" v-bind:class="{ active: currentFilter === 'ALL' }" v-on:click="setFilter('ALL')">ALL</span>
<span class="filter" v-bind:class="{ active: currentFilter === 'DESIGN' }" v-on:click="setFilter('DESIGN')">DESIGN</span>
<span class="filter" v-bind:class="{ active: currentFilter === 'DEVELOPMENT' }" v-on:click="setFilter('DEVELOPMENT')">DEVELOPMENT</span>
<span class="filter" v-bind:class="{ active: currentFilter === 'COLABORATION' }" v-on:click="setFilter('COLABORATION')">COLABORATION</span>
</div>
<div class="container">
<transition-group class="projects" name="projects">
<div class="rounded project" v-if="currentFilter === project.category || currentFilter === 'ALL'" v-bind:key="project.title"
v-for="project in projectList">
<!-- Modal pop up -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true" v-for="project in projectList">
<div class="modal-dialog" role="document">
<div class="modal-content" >
<div class="modal-header">
<img class="project-image " v-bind:src="project.img">
</div>
<div class="modal-body">
<p class="project-title">{{project.title}}</p>
<h5 class="modal-title" id="exampleModalLongTitle">
</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="border shadow border-ligh project-image-wrapper mb-5">
<img class="project-image " v-bind:src="project.img">
<div class="project-description">
<p class="project-title">{{project.title}}</p>
<a :href="project.link" class="btn btn-danger" target="_blank">View Website</a>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal">
View Details
</button>
</div>
</div>
</div>
</transition-group>
</div><!-- container end -->
</section>
</div>
这是一个小提琴链接 Jsfiddle
答案 0 :(得分：0)
首先，您有重复的v-for，因此应从模态元素中删除v-for。
您的模态位于循环内部，因此对于DOM中的每个项目，都有一个隐藏的模态元素。它们都具有相同的id，即myModal。单击视图详细信息时，将显示第一项的第一个模态。
解决此问题的一种方法是为每个元素添加唯一的模式ID。例如，如果我们要在数组中使用项目索引，则可以使用以下构造id的方法进行添加。现在，每个元素都有一个从myModal0到myModal5的唯一ID。当您单击立即查看详细信息时，Bootstrap会搜索要打开的模式，知道正确的模式是什么。
<div class="modal fade" :id="'myModal' + i">
<button type="button" :data-target="'#myModal' + i">
答案 1 :(得分：0)
您需要数据中的唯一ID。您可以将其分配给
之类的模式ID:id="'myModal'+ project.id"
否则，请按照答案中提到的@Lassi的说明进行操作。
我在Modal ID && button数据目标中分叉了您的小提琴并传递了project.title。
<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>
提琴：https://jsfiddle.net/3zv7jope/
下面是传递索引的示例
v-for="(project, index) in projectList" :id="'myModal-'+index"