单击第二个按钮后，VueJs 不删除图像

Question

所以我试图在我的网络应用程序上进行团队比较以比较他们的统计数据，问题是在我选择了两个团队之后删除了其中一个团队，起初我成功但是当我尝试删除最后一个它什么都不做最后一个团队标志仍然出现。下面是我的代码。

在控制台上显示 selectedTeams 值在 remove-first 和 remove-second 被点击后未定义

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

显示团队徽标

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

移除团队徽标

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

团队选择

<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 代码

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;
            }
        });
    }
}

Answer 1

只需通过您要删除的团队即可。

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

并更改您的 removeTeam 方法。

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