2番目のボタンをクリックした後にVueJsが画像を削除しない

Question

私は自分のWebアプリケーションでチームの比較を行って統計情報を比較しようとしていますが、2つのチームを選択した後、私は成功しますが、最後のチームロゴを削除しようとすると、最後のチームロゴはまだ表示されません。以下は私のコードです。コンソールで

が削除第と削除秒が

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> 

クリックされた後selectedTeams値が未定義であることを示していますチームロゴを削除する

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