Удалить класс для всех элементов и добавить класс в кликнув. Itemin Vue.js - PullRequest
Новая
       23

Удалить класс для всех элементов и добавить класс в кликнув. Itemin Vue.js

0 голосов
/ 05 ноября 2018

Итак, я знаю, как сделать это на обычном JS, где, если у меня есть список вещей и я хочу, чтобы один элемент был активным одновременно, я бы удалил класс из всех перечисленных элементов и добавил его. на тот, который был нажат. К сожалению, я не могу понять это в Vue.js, поскольку я все еще изучаю это. Я хочу вызвать переменную с именем 'activeComp' как истинную только для элемента, по которому щелкнули, и сделать его ложным для всех остальных элементов, по которым выполняется щелчок, поэтому одновременно активен только один элемент. На данный момент, это позволит мне выбирать по одному, но класс остается на других. Вот мой код: 

<div v-if="companions.length > 0" v-for="companion in companions">

  <comp-item :companionData="companion"></comp-item>

</div>



<template>

  <div class='companion-item' @click="toggleActive" :class="{ active: activeComp }">
    <h3>{{ companionData.name }} <span class='desc'>({{ companionData.desc }})</span></h3>
  </div>

</template>

<script>
  export default {
    props: ['companionData'],
    data() {
      return {
        activeComp: false
      };
    },
    methods: {
      toggleActive() {
        this.activeComp = !this.activeComp;
      }
    }
  }
</script>

Любая помощь в этом очень ценится.

1 Ответ

0 голосов
/ 05 ноября 2018

Поскольку в данный момент существует только 1 активный элемент, вы должны отслеживать текущий активный элемент в родительском компоненте: 

<div 
  v-if="companions.length > 0" 
  v-for="(companion, index) in companions" 
  :key="index">
  <comp-item :companionData="companion" 
             :isActive="activeIndex === index" 
             @onToggle="onToggle(index)">
  </comp-item>
</div>

<script>
  ...
    data() {
      return {
        activeIndex: null
      };
    },
    methods: {
      onToggle(index) {
        if (this.activeIndex === index) {
          this.activeIndex = null;
        } else {
          this.activeIndex = index;
        }
      }
    }
    ...
</script>

Затем в дочернем компоненте вы можете передать событие click родительскому элементу: 

<template>

  <div class='companion-item' @click="toggleActive" :class="{ active: isActive }">
    <h3>{{ companionData.name }} <span class='desc'>({{ companionData.desc }})</span></h3>
  </div>

</template>

<script>
  export default {
    props: ['companionData', 'isActive'],
    data() {
      return {
      };
    },
    methods: {
      toggleActive() {
        this.$emit('onToggle')
      }
    }
  }
</script>

Когда пользователь нажимает на элемент, событие отправляется родительскому элементу и обрабатывается методом onToggle.

...