Javascript 单击第二个按钮后VueJs未删除图像

因此，我试图在我的web应用程序上进行团队比较，以比较他们的统计数据，问题是，在我选择了两个团队，然后删除其中任何一个团队后，起初我成功了，但当我尝试删除最后一个团队时，它什么也不做，最后一个团队徽标仍然显示出来。下面是我的代码

在控制台上，它显示单击删除第一个和删除第二个后，所选团队的值未定义

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

vs
比较

团队选择

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

导出默认值{
数据：函数（）{
返回{
小组：{}，
isTeamsSelected:正确，
isplayerselected:false，
showTeamSelection：正确，
所选团队：[]，
选定的玩家：[]，
}
},
混合：[
过滤器，
方法
],
方法：{
选举小组（e）{
如果（此.selectedTeams.length<2）{
这个.selectedTeams.push（例如target.dataset.teamName）；
if（this.selectedTeams.length==2）{
this.showTeamSelection=false；
}
console.log（this.selectedTeams）；
} 
返回false；
},
拆除梁（e）{
让removeTeam=e.target.classList.value；
this.showTeamSelection=true；
if（removeTeam.indexOf（'remove-first'）>=0）{
此.selectedTeams[0]=未定义；
console.log（this.selectedTeams[0]，this.selectedTeams，0）；
}
if（removeTeam.indexOf（'remove-second'）>=0）{
此.selectedTeams[1]=未定义；
log（this.selectedTeams[1]，this.selectedTeams，1）；
}
},
},
挂载：函数（）{
让自我=这个；
this.getCurrentSeasonTeams（）.then（函数（响应）{
如果（response.status==200&&response.data.length>0）{
self.teams=response.data；
}
});
}
}

只需传递要删除的团队即可

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

---

在数组中将值设置为undefined是删除它的一种不寻常的方法。为什么不干脆剪接呢？我想这可能是您的问题的根源。@BertEvans我尝试过使用它。selectedTeams[0]=''，这个。selectedTeams[1]=''并更改我在图像上的条件，但仍然没有成功