Vue - перебирает массив объектов и выделяет выбранный элемент по щелчку

Question

У меня есть массив объектов, который содержит данные, которые я выводил в DOM, используя карту.Каждый элемент в списке имеет прослушиватель событий @click.Когда вы нажимаете на один из элементов, я хочу, чтобы он был выделен путем добавления класса CSS, например, «hover».Так что в основном это должно работать как система меню.Когда вы нажимаете на элемент, этот элемент выделяется, а остальные не должны выделяться, и наоборот.

При настройке этого элемента все элементы в списке выделяются, чтоне та логика, которую я пытаюсь сделать.Я использовал 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-for.Единственное, что нужно в разметке, это изменить значение :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 будет эквивалентно истине

Btw;Я бы предложил вам переименовать объект истребителей в dragonBallFighters.Таким образом, v-for имеет больше смысла == <v-for="fighter in dragonBallFighters" Можно было бы перевести это значение в

для каждого бойца в объекте dragonBallFighters.

Сейчас выкосвенно говорят

для каждого dragonBallFighters в объекте dragonBallFighter

ведьма не плавает одинаково на языке;)

Answer 2

Поместите «активный» в качестве свойства каждого бойца dragonBall и включите его, если на него нажали, а остальные отключите.

Концепция Vue - играть с данными и позволить Vue позаботиться оПользовательский интерфейс:)

ИЛИ

переименуйте "active" в activeID и установите идентификатор выбранного элемента в activeID, а затем примените указатель мыши только в том случае, если activeID == item.id