Dynamic Modal Using index as ID VueJS

Question

Hoping someone can help.

This is my first time using Vue and I have been asked to create a teams page which pulls data from a list, groups the names by team name in an array and displays them in card format. I have managed to do all this, however when the cards are clicked I'm looking to have all the team members and their role (e.g developer, product manager etc) display in a modal along with the team image

I have used the index as the ID for each card which is working fine but I am unsure as to how to pass this to the modal to display the correct members for each team when the card is clicked. I have tried various methods I've found on here but none seem to relate exactly to what I'm doing and my lack of Vue knowledge is hindering me as I can do this easily with normal HTML/JS.

It's also probably worth mentioning that due to work PC permissions and the fact this is being built on SharePoint I am having to use the Vue CDN and implement this in 1 HTML file rather than using components.

Many Thanks in advance and I hope this makes sense

Here is my HTML:

        
        MEETING THE TEAM
        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.
        

        
        

        
            
                
                
                    
                    
                        {{ team[0].teamname }}
                        {{ teammate.teamdescription }}
                    
                    
                        
                        
                        
                        
                            
                        
                    
                
                
            
        
    

    
    
        
            
                
                    {{ team[0].teamname }}
                    
                
                

                   
                    {{ teammate.name }}
                    {{ teammate.hackertype }}

And my 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");
});

});

Dynamic Modal Using index as ID VueJS

Answers (1)

Related Questions