Question

我有一个简单的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功能。我还需要一个周期地工作（当活动是最后一张卡并且我单击下一步时-活动应该是第一项）？

Answer 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>

Vue.js触发点击到下一个孩子

1 个答案: