Vuejs вызвать клик для следующего ребенка - PullRequest
Новая
       15

Vuejs вызвать клик для следующего ребенка

0 голосов
/ 03 сентября 2018

У меня есть простой v-for с несколькими пунктами и кнопкой. Как я могу вызвать событие клика для следующего элемента внутри v-for

Шаблон 

<div class="card" v-for="(card, card_index) in cards)">
    <div class="item" :class={'active': active === card_index + 'key'}
         @click="toggleActive(index)">{{ card.name }}
   </div>
</div>
<button>Next</button>

JS 

toggleActive(index) {
    this.active === index + 'key'
    // some logic with card
}

Как я могу активировать функцию toggleActive, когда нажимаю кнопку «Далее». Также мне нужно работать в цикле (когда активна последняя карта и я нажимаю на следующую - активным должен быть первый элемент)?

1 Ответ

0 голосов
/ 03 сентября 2018

Если я хорошо понял ваш вопрос, вы можете использовать числовую переменную для определения текущего активного индекса, а затем изменить метод toggleActive следующим образом: 

  data() {
    return {
      activeIndex: -1;
    }
  },

  methods: {

    toggleActive(index) {

      if (index) {

        this.activeIndex = index;

      } else {

        this.activeIndex += 1;

        if ((this.activeIndex + 1) == this.cards.length) {
          this.activeIndex = 0;
        }

      }

    }

  }
<div class="card" v-for="(card, card_index) in cards)">
  <div class="item" :class="{'active': activeIndex == card_index}" @click="toggleActive(card_index)">
  {{ card.name }}
  </div>
</div>
<button @click="toggleActive">Next</button>
...