通过一个对象数组循环Vue -循环，并在单击时突出显示选定项。

Question

我有一个包含数据的对象数组，我使用map将其输出到DOM。列表中的每个项都有一个@click事件侦听器。当您单击其中一个项目时，我希望通过添加css类来突出显示它，例如“悬停”。所以基本上它应该像菜单系统一样工作。当您单击某一项时，该项目将被高亮显示，其他项目不应高亮显示，反之亦然。

现在设置它的方式，列表中的所有项目都会被高亮显示，这不是我想要做的逻辑。我使用了console.log，以显示已单击的项目。然而，我仍然没有弄清楚，如何使选定的项目，突出显示的项目，而不是整个列表？

<template>
<div>
    <div>
        <h1>Dragonball</h1>
    </div>
    <div>
        <ul>
            <li v-for="(dragonBallFighters, index) of dragonBallFighter" @click="toggleClass(dragonBallFighters.id)" :key=dragonBallFighters.id :class="{hover: active}">
                <div class="dragonball-container">
                    <div class="dragonball-stats">
                    <h1>{{index}}, {{dragonBallFighters.name}}</h1>
                    <p>{{dragonBallFighters.race}}</p>
                    <p>{{dragonBallFighters.specialAttack}}</p>
                </div>
                <div class="dragonball-image">
                    <img :src="dragonBallFighters.img" :alt="dragonBallFighters.name" />
                </div>
                </div>
            </li>
        </ul>
    </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      active: false,
      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);

      const currentState = this.active;
      this.active = !currentState;
      //   this.selectedItemIndex = id;

      if (this.selectedItemIndex === id) {
        this.active === true;
      } else if (this.selectedItemIndex === !id) {
        this.active === false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.dragonball-container {
  cursor: pointer;
  display: grid;
  padding: 20px;
  grid-template-columns: 1fr 1fr;
  //background: #666;
  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>

Answer 1

我更喜欢这样做的方法是为每个战士添加一个新的键，并在v中使用这个键。标记中唯一需要的是将:class值从v-for循环中的战斗人员中更改为活动密钥。

   <li
      v-for="(dragonBallFighters, index) of dragonBallFighter"
      @click="toggleClass(dragonBallFighters.id)"
      :key=dragonBallFighters.id
      :class="{hover: dragonBallFighters.active}"
   >
    <div class="dragonball-container">
      <div class="dragonball-stats">
        <h1>{{index}}, {{dragonBallFighters.name}}</h1>
        <p>{{dragonBallFighters.race}}</p>
        <p>{{dragonBallFighters.specialAttack}}</p>
      </div>
      <div class="dragonball-image">
        <img :src="dragonBallFighters.img" :alt="dragonBallFighters.name" />
      </div>
    </div>
  </li>

然后，对于Javascript，我们使用Vue.set()告诉dom，我们添加了一个不是v-for所知道的原始对象中的键。这使得当我们改变战士的“主动性”时，vue正确地更新了dom。

toggleClass(id) {
  // Create variable for all fighters (name takes up less space)
  let allFigthers = this.dragonBallFighter;
  // Get the clicked fighter
  let fighter = allFigthers.find(e => e.id === id)
  // Set all fighters to have a active key of false so that they "loose focus"
  allFigthers = allFigthers.map(e => Vue.set(e, 'active', false))
  // Use Vue.set to tell vue that we updated the object and it needs to be re-rendered
  Vue.set(fighter, 'active', !fighter.active)
}

实例化

我切换活动类的方式只是通过执行!fighter.active。这将被转换为not {boolean} ~如果fighter.active是true，那么not true将等效为false。如果是假的，则not false将等效为true。

顺便说一句，我建议你把战士的目标重命名为dragonBallFighters。这样，v-for就更有意义了，== <v-for="fighter in dragonBallFighters" One可以将其转换为

对于dragonBallFighters对象中的每个战士。

现在，你间接地说

对于dragonBallFighter对象中的每个dragonBallFighter

巫婆不会在舌头上漂浮同样的东西;)

Answer 2

将"active“作为每个dragonBall战斗机的属性，如果单击它并关闭其余的，则打开它。

Vue的概念是处理数据，让Vue负责UI :)

或

将"active“重命名为activeID，并将单击项的ID设置为activeID，然后仅在activeID == item.id时应用悬停。