我不明白如何做到这一点，以便当您单击按钮打开模态框时，例如第二个对象，模态框会打开同一个对象的数据。 https://codepen.io/Glebmak/pen/wvBgeVG
new Vue({
el: '#app',
data () {
return {
showModal: false,
cands: [
{ firstName: 'John', lastName: 'Doe'},
{ firstName: 'Flow', lastName: 'Obama'},
{ firstName: 'Kanye', lastName: 'West'}
],
}
},
})#app {
font-family: Open Sans;
}
section {
max-width: 920px;
margin: 0 auto;
}
.title {
text-align: center;
}
.candidates {
margin: 0 auto;
tbody {
tr {
td {
padding-right: 16px;
img {
width: 50px;
border-radius: 50%;
}
}
}
}
}
.overlay {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal {
position: relative;
width: 300px;
z-index: 9999;
margin: 0 auto;
padding: 20px 30px;
background-color: #fff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<section>
<table class="candidates">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
</tr>
</thead>
<tbody>
<tr v-for="(cand, index) in cands" :key="index">
<td>{{ cand.firstName }}</td>
<td>{{ cand.lastName }}</td>
<td><button @click="showModal = true">View</button></td>
</tr>
</tbody>
</table>
<div class="overlay" v-if="showModal" @click="showModal = false"></div>
<div class="modal" v-if="showModal">
<div class="modal-contant" v-for="(cand, index) in cands" :key="index">
<img src="" alt="" />
<div>{{ cand.firstName }}</div>
<div>{{ cand.lastName }}</div>
</div>
<button class="close" @click="showModal = false">Close</button>
</div>
</section>
</div>
