Vue遍历对象数组：实现点击单一项高亮选中的问题

Hey Andrew, let's fix that issue where all list items highlight at once! The root problem is your original code uses a single boolean active flag that every item checks—so toggling it makes everything get the hover class. Instead, we need to track which specific item is selected by its unique ID. Here's the revised implementation:

Template Section #

<template>
  <div>
    <div>
      <h1>Dragonball</h1>
    </div>
    <div>
      <ul>
        <!-- Check if current item's ID matches the selected ID to apply the hover class -->
        <li 
          v-for="(fighter, index) of dragonBallFighter" 
          @click="toggleClass(fighter.id)" 
          :key="fighter.id" 
          :class="{hover: fighter.id === selectedId}"
        >
          <div class="dragonball-container">
            <div class="dragonball-stats">
              <h1>{{index}}, {{fighter.name}}</h1>
              <p>{{fighter.race}}</p>
              <p>{{fighter.specialAttack}}</p>
            </div>
            <div class="dragonball-image">
              <img :src="fighter.img" :alt="fighter.name" />
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

Script Section #

<script>
export default {
  data() {
    return {
      // Track the ID of the currently selected item (null = no selection)
      selectedId: null,
      dragonBallFighter: [
        { id: 1, name: 'Goku', race: 'Sayain', specialAttack: 'Kamehameha Wave', img: 'https://geeksnipper.com/wp-content/uploads/2018/03/Screen-Shot-2018-03-04-at-8.52.28-AM.png' },
        { id: 2, name: 'Vegeta', race: 'Sayain', specialAttack: 'Final Flash', img: 'https://nerdreactor.com/wp-content/uploads/2018/01/vegeta-ssb.jpg' },
        { id: 3, name: 'Brolly', race: 'Sayain', specialAttack: 'Crusher Blast', img: 'http://media.comicbook.com/2017/05/broly-995283-1280x0.png' },
        { id: 4, name: 'Majin Buu', race: 'Unknown', specialAttack: 'Absorbtion', img: 'https://i.ytimg.com/vi/50GF26RBWjw/maxresdefault.jpg' },
        { id: 5, name: 'Janemba', race: 'Unknown', specialAttack: 'Teleportation Warp', img: 'https://vignette.wikia.nocookie.net/villainstournament/images/f/f1/Super_janemba.png/revision/latest?cb=20140311163545' },
        { id: 6, name: 'Tien', race: 'Human', specialAttack: 'Tri Beam', img: 'http://i1.wp.com/www.dragonball.co/wp-content/uploads/2016/08/tien_banner.png?fit=704%2C396' },
        { id: 7, name: 'Vegito SSJB', race: 'Sayian', specialAttack: 'Final kamehameha', img: 'http://i1.wp.com/shoryuken.com/wp-content/uploads/2018/05/Vegito-Blue-SSGSS-Attack.png?fit=750%2C400&resize=750%2C400' },
        { id: 8, name: 'Toppo', race: 'Unknown', specialAttack: 'Finger Blasters', img: 'https://i.ytimg.com/vi/_Lz9bTEL1dM/maxresdefault.jpg' },
        { id: 9, name: 'Dyspo', race: 'Unknown', specialAttack: 'Super Hyper Lightspeed Mode', img: 'https://pre00.deviantart.net/5458/th/pre/f/2017/148/1/8/dragon_ball_super_dyspo_by_giuseppedirosso-dbaqm0s.jpg' },
        { id: 10, name: 'Future Trunks', race: 'Human', specialAttack: 'Galick Gun', img: 'https://static5.comicvine.com/uploads/original/11129/111290855/5809735-3904647274-14886.png' }
      ]
    };
  },
  methods: {
    toggleClass(id) {
      console.log('Clicked ' + id);
      // Toggle selection: if clicking the already selected item, deselect it; else select the new item
      this.selectedId = this.selectedId === id ? null : id;
      
      // If you don't want deselection (always keep one item highlighted), use this instead:
      // this.selectedId = id;
    }
  }
};
</script>

Style Section (No Changes Needed) #

<style lang="scss" scoped>
.dragonball-container {
  cursor: pointer;
  display: grid;
  padding: 20px;
  grid-template-columns: 1fr 1fr;
  border: 2px solid #666;
  grid-gap: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(240, 240, 240, 1);
  -moz-box-shadow: 10px 10px 5px 0px rgba(240, 240, 240, 1);
  box-shadow: 10px 10px 5px 0px rgba(240, 240, 240, 1);
}
.dragonball-image img {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 300px;
  border-radius: 100%;
}
ul li {
  list-style: none;
}
.hover {
  background: rgb(244, 244, 244);
  border-radius: 10px;
}
</style>

Key Fixes Explained: #

• Tracking Selection: Replaced the global active boolean with selectedId to store the ID of the clicked item. This lets us target only the selected item for highlighting.
• Class Binding: Each list item now checks if its own ID matches selectedId—only the matching item gets the hover class.
• Toggle Logic: The updated toggleClass method either sets selectedId to the clicked item's ID or clears it (if you click the same item twice), giving you flexible selection behavior.

内容的提问来源于stack exchange，提问作者Andrew Baisden