Javascript 使用索引作为ID VueJS的动态模式

希望有人能帮忙

这是我第一次使用Vue，我被要求创建一个团队页面，该页面从列表中提取数据，按团队名称在数组中分组，并以卡片格式显示。我已经设法做到了这一切，但是，当点击卡片时，我希望所有团队成员及其角色（例如开发人员、产品经理等）与团队形象一起以模式显示

我已经使用索引作为每张工作正常的卡片的ID，但我不确定如何将其传递给modal，以便在单击卡片时显示每个团队的正确成员。我已经尝试了我在这里找到的各种方法，但似乎没有一种方法与我正在做的事情完全相关，而且我缺乏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">&times;</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>

会见团队
这是一个让你告诉你的国家和其他球队你是谁以及你的立场的机会。你会
需要一个团队名称、团队吉祥物形象、团队成员以及你想对世界说什么


创建一个新团队
更新您的团队
{{team[0].teamname}
&时代；


{{teamber.name}

{{队友.hackertype}

接近

还有我的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");
});

$（函数（）{
var appTeamCards=新的Vue({
el:'应用程序团队'，
数据：{
团队：[]，
团队成员：[]，
},
挂载：函数（）{
this.getTeams（）；
},
方法：{
getTeams:function（）{
var self=这个；
$.ajax({
url:“/sites/DigiHub/\u api/web/lists/getbytitle（\'global-hackathon-reg\）/items？$orderby=Modified desc”，
方法：“获取”，
标题：{
“接受”：“application/json；odata=verbose”
},
成功：功能（数据）{
var posts=数据d.结果；
读取数据（员额）；
控制台日志（self.teams）；
},
});
函数readData（数据）{
self.teams=groupBy（数据，“团队名称”）；
};
函数groupBy（集合、属性）{
var i=0，val，索引，
值=[]，结果=[]；
对于（；i-1）
结果[index].push（集合[i]）；
否则{
推送值（val）；
结果.推送（[collection[i]]）；
}
}
返回结果；
}
},
}
}); 
$（“#更新团队”）。单击（函数（）{
$（“#新成员表单”）.hide（）；
$（“#注册另一个更新”）.show（）；
$（“#更新表单”）.show（）；
});
$（“#创建团队”）。单击（函数（）{
$（“#新会员表格”）.show（）；
$（“#更新表单”）.show（）；
$（“#注册另一个更新”）.hide（）；
});
$（“#注册另一个更新”）。单击（函数（）{
$（“#新会员表格”）.show（）；
$（“#注册另一个更新”）.hide（）；
$（“#更新表单”）.hide（）；
});
$（“#提交团队btn”）。单击（函数（）{
$（“#更新表格”）.attr（“禁用”、“禁用”）；
});

---

}))

看来我的解决方案是对的，但语法有点错误。我已作出以下修订，我的守则现正如期运作

卡锚参考应按以下方式书写：

<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">