希望有人可以提供帮助。
这是我第一次使用Vue，我被要求创建一个团队页面，该页面从列表中提取数据，按队列名称对数组进行分组，并以卡片格式显示。我已经设法做到这一切，但是当点击卡片时，我希望让所有团队成员和他们的角色（例如开发人员，产品经理等）与团队形象一起显示在一个模态中
我已经使用索引作为每张卡的ID工作正常，但我不确定如何将此传递给模式以在单击卡时显示每个团队的正确成员。我已经尝试了各种方法，但我似乎没有完全与我正在做的事情有关，而我缺乏Vue知识会阻碍我，因为我可以使用普通的HTML / JS轻松完成。
也可能值得一提的是，由于工作PC权限以及这是在SharePoint上构建的事实，我不得不使用Vue CDN并在1个HTML文件中实现它，而不是使用组件。
非常感谢，我希望这是有道理的
这是我的HTML：
<div class="container">
<h1 class="page-heading">MEET<span style="color:#ff0000">IN</span>G THE TEAM</h1>
<p class="intro-text">This is a chance for you to tell your Country and the other teams who you are and what you stand for. You’ll
need a team name, team mascot image, who’s in your team and what you want to say to the world.</p>
<br>
<button class="btn btn-outline-light" type="button" role="button" data-target="#create-modal" data-toggle="modal" id="create-team">Create a New Team</button>
<button class="btn btn-outline-light" type="button" role="button" data-target="#create-modal" data-toggle="modal" id="update-team">Update Your Team</button>
<div class="row" id="team-cards">
<div class="col-md-4" v-for="(team, index) in teams" :key="team[0].teamname" v-if="team[0].teamname !== 'No Team'">
<a href="'#teamModal' + index" data-toggle="modal">
<div class="card" v-bind:id="index">
<img v-bind:src="teammate.teamimage" class="card-img-top" v-for="teammate in team" v-if="teammate.teamimage !== null" :key="teammate.teamimage">
<div class="card-body">
<h5 class="card-title"><strong>{{ team[0].teamname }}</strong></h5>
<p class="card-text" v-for="teammate in team" v-if="teammate.teamdescription !== null" :key="teammate.teamdescription">{{ teammate.teamdescription }}</p>
</div>
<div class="card-footer">
<img class="group-image" v-for="teammate in team" v-if="teammate.hackertype !== 'Developer'" :key="teammate.hackertype" src="https://community.global.hsbc/sites/DigiHub/SiteAssets/hub_assetts/Hack%20Teams/Images/red%20group.png">
<!-- <img class="group-image" v-for="teammate in team" v-else-if="teammate.hackertype !== 'Product Manager' || teammate.hackertype == 'Developer'" :key="teammate.hackertype" src="https://community.global.hsbc/sites/DigiHub/SiteAssets/hub_assetts/Hack%20Teams/Images/yellow%20group.png"> -->
<!-- <img class="group-image" v-for="teammate in team" v-if="teammate.hackertype == 'Developer' || teammate.hackertype == 'Product Manager'" :key="teammate.hackertype" src="https://community.global.hsbc/sites/DigiHub/SiteAssets/hub_assetts/Hack%20Teams/Images/green%20group.png"> -->
<a href="https://community.global.hsbc/sites/DigiHub/SitePages/Hack-Chat.aspx" target="_blank">
<img class="chat-image" src="https://community.global.hsbc/sites/DigiHub/SiteAssets/hub_assetts/Hack%20Teams/Images/chat.png">
</a>
</div>
</div>
</a>
</div>
</div>
</div>
<!-- Team Modal -->
<div class="modal fade" v-bind:id="['teamModal'+index]" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><b>{{ team[0].teamname }}</b></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<br>
<div class="modal-body" v-for="teammate in team">
<p>{{ teammate.name }}</p>
<p>{{ teammate.hackertype }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
而我的VueJS：
$(function () {
var appTeamCards = new Vue({
el: '#app-teams',
data: {
teams: [],
teamMembers: [],
},
mounted: function() {
this.getTeams();
},
methods: {
getTeams: function() {
var self = this;
$.ajax({
url: '/sites/DigiHub/_api/web/lists/getbytitle(\'global-hackathon-reg\')/items?$orderby=Modified desc',
method: "GET",
headers: {
"Accept": "application/json;odata=verbose"
},
success: function (data) {
var posts = data.d.results;
readData(posts);
console.log(self.teams);
},
});
function readData(data) {
self.teams = groupBy(data, "teamname");
};
function groupBy(collection, property) {
var i = 0, val, index,
values = [], result = [];
for (; i < collection.length; i++) {
val = collection[i][property];
index = values.indexOf(val);
if (index > -1)
result[index].push(collection[i]);
else {
values.push(val);
result.push([collection[i]]);
}
}
return result;
}
},
}
});
$('#update-team').click(function(){
$("#new-member-form").hide();
$("#reg-another-update").show();
$("#update-form").show();
});
$('#create-team').click(function(){
$("#new-member-form").show();
$("#update-form").show();
$("#reg-another-update").hide();
});
$('#reg-another-update').click(function(){
$("#new-member-form").show();
$("#reg-another-update").hide();
$("#update-form").hide();
});
$('#submit-team-btn').click(function(){
$("#update-form").attr("disabled", "disabled");
});
});
我似乎有正确的解决方案，但语法略有错误。我做了以下修改，现在我的代码按预期工作。
卡锚引用应写成如下：
<a :href="'#teamModal' + index" data-toggle="modal">
模态ID：
<div class="modal fade" :id="'teamModal' + index" v-for="(team, index) in teams" :key="team[0].teamname" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">