vue.js собитие срабатывает для всех элементов. Помогите разобраться?

Question

<template>
      <div class="user-info">
      <b-card 
         v-for="(user, index) in allUsers"
         :key="index"
         bg-variant="warning" class="text-center user-card" 
         :header="user.login"
         @click="isHidenCardBody = !isHidenCardBody"
         >
         <b-card-text v-if="isHidenCardBody">{{ `id: ${user.id}` }}</b-card-text>
      </b-card>
      </div>
</template>

<script>
   export default {
      data() {
         return {
            isHidenCardBody: false
         }
      },

Есть такой код, при клике на определенный элемент, у меня становятся видимыми все элементы, а должен быть только тот по которому произвел клик, подскажите пож. как это решить?

Answer 1

Вот так, по идее, должно работать. Писал "на коленке"

< script >
  export default {
    data() {
      return {
        activeIndex: -1
      },

    },
    methods: {
      handlerClickOnCard(index) {
        if (index === this.activeIndex) {
          this.activeIndex = -1;
          return;

        }
        this.activeIndex = index
      },

<template>
      <div class="user-info">
      <b-card 
         v-for="(user, index) in allUsers"
         :key="index"
         bg-variant="warning" class="text-center user-card" 
         :header="user.login"
         @click="handlerClickOnCard(index)"
         >
         <b-card-text v-if="activeIndex === index">{{ `id: ${user.id}` }}</b-card-text>
      </b-card>
      </div>
      </template>

Answer 2

Как-то так

export default {
            methods: {
              handlerClickOnCard(event) {
              if( event.target.style.display ==== 'none'){
                event.target.style.display = 'none'
                } else event.taget.style.display = 'block'
              },
          },
        }

        <template>
        <div class="user-info">
        <b-card 
           v-for="(user, index) in allUsers"
           :key="index"
           bg-variant="warning" class="text-center user-card" 
           :header="user.login"
           @click="handlerClickOnCard"
           >
        </b-card>
        </div>
        </template>

БЛОГ НА HUSL

vue.js собитие срабатывает для всех элементов. Помогите разобраться?

Ответы (2 шт):