Vuejs触发点击下一个孩子答案

【问题标题】：Vuejs trigger click to next childVuejs触发点击下一个孩子
【发布时间】：2019-02-08 15:33:00
【问题描述】：

我有一个简单的 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>

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

当我单击“下一步”按钮时，如何触发 toggleActive 功能。我还需要循环工作（当活动是最后一张卡并且我单击下一个时 - 活动应该是第一项）？

【问题讨论】：

标签： vue.js toggle v-for

【解决方案1】：

如果我很好理解您的问题，您可以使用数字变量来识别当前活动索引，然后以这种方式更改 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>

【讨论】：