CODEWITHSUNDEEP
javascriptlaravelvue.jsvue-component
PenAndPapers
PenAndPapers

Reputation: 2108

VueJs not removing image after second button is clicked

So I'm trying to make a team comparison on my web app to compare their stats, the problem is that after I selected two teams then remove either one of the team, at first I succeed but when I try to remove the last one its doing nothing the last team logo is still showing up. Below is my code.

On the console it shows that selectedTeams values are undefined after remove-first and remove-second are clicked

undefined (2) [undefined, "TeamB", __ob__: Observer] 0
undefined (2) [undefined, undefined, __ob__: Observer] 1

Display Team Logo

<div class="col-md-6 first-selected">
    <img id="firstteamlogo" :src="selectedTeams[0] | spacetodash | useLGLogo" v-if="selectedTeams[0] || selectedTeams[0] != undefined">
</div>
<div class="col-md-6 second-selected">
    <img id="secondteamlogo" :src="selectedTeams[1] | spacetodash | useLGLogo" v-if="selectedTeams[1] || selectedTeams[1] != undefined">
</div>

Remove Team Logo

<div class="add-area">
    <i class="fa fa-times remove-first" aria-hidden="true" v-if="selectedTeams[0]" v-on:click="removeTeams"></i>
    <i class="fa fa-plus select-first" aria-hidden="true" v-else></i>
    <span v-if="selectedTeams[0]">vs</span>
    <span v-else>Comparison</span>
    <i class="fa fa-times remove-second" aria-hidden="true" v-if="selectedTeams[1]" v-on:click="removeTeams"></i>
    <i class="fa fa-plus select-second" aria-hidden="true" v-else></i>
</div>

Team Selection

<div class="team-selection" v-if="showTeamSelection">
    <div class="team-row">
        <div class="col-md-3" v-for="(team, index) in teams" v-if="index < 4">
            <div class="team-logo">
                <img class="team" :src="team.clubName | spacetodash | useMDLogo" :id="team.clubName | removespace" :data-team-name="team.clubName" :data-team-id="team.teamId" v-on:click="selectTeams">
            </div>
        </div>
    </div>
    <div class="team-row">
        <div class="col-md-3" v-for="(team, index) in teams" v-if="index > 3">
            <div class="team-logo">
                <img class="team" :src="team.clubName | spacetodash | useMDLogo" :id="team.clubName | removespace" :data-team-name="team.clubName" :data-team-id="team.teamId" v-on:click="selectTeams">
            </div>
        </div>
    </div>
</div>

VueJs Code

export default {
    data: function(){
        return {
            teams: {},
            isTeamsSelected: true,
            isPlayersSelected: false,
            showTeamSelection: true,
            selectedTeams: [],
            selectedPlayers: [],
        }
    },
    mixins: [
        filters,
        methods
    ],
    methods: {
        selectTeams(e) {  
            if(this.selectedTeams.length < 2){
                this.selectedTeams.push(e.target.dataset.teamName);

                if(this.selectedTeams.length == 2){
                    this.showTeamSelection = false;
                }

                console.log(this.selectedTeams);
            } 
            return false;
        },
        removeTeams(e) {
            let removeTeam = e.target.classList.value;

            this.showTeamSelection = true;

            if(removeTeam.indexOf('remove-first') >= 0){
                this.selectedTeams[0] = undefined;
                console.log(this.selectedTeams[0], this.selectedTeams, 0);
            }
            if(removeTeam.indexOf('remove-second') >= 0){
                this.selectedTeams[1] = undefined;
                console.log(this.selectedTeams[1], this.selectedTeams, 1);
            }
        },
    },
    mounted: function() {
        let self = this;

        this.getCurrentSeasonTeams().then(function(response){
            if( response.status == 200 && response.data.length > 0 ) {
                self.teams = response.data;
            }
        });
    }
}

Upvotes: 1

Views: 132

Answers (1)

Bert
Bert

Reputation: 82469

Just pass the team you want to remove.

<i class="fa fa-times" aria-hidden="true" v-if="selectedTeams[0]" v-on:click="removeTeams(selectedTeams[0])"></i>

And change your removeTeam method.

removeTeams(team) {
  this.selectedTeams.splice(this.selectedTeams.indexOf(team), 1)
  this.showTeamSelection = true;
}

Upvotes: 1

Related Questions