vue.js - 在子项 vueJS.2 之间切换 "active"类

Question

我只想知道如何使用 vue.js 方式，现在我可以在单个项目上切换 active 类，当我单击其他项目时，active 类仍然出现在上一个项目上，这是我的设置:

FileOne.vue(父组件)

// Say that I have 5 Items I am rendering here:
<template>
  <ul v-for="item in items">
    <my-list-item :item-title="article.title"
                  :item-content="article.content"> </my-list-item>
  </ul>
</template>

<script>
  import Items from './FileTwo'
  export default {}
</script>

fileTwo.vue(子组件)

// When I click each Item the `active` class should be applied to the current Item and removed from previous item:
<template>
  <li :class="{'active': isRowActive}" @click.stop="toggleRowActive">
    <h1>{{articleTitle}}</h1>
    <p>{{itemContent}}</p>
  </li>
</template>

<script>  
  export default {
    name: 'my-list-item',
    data: function () {
      return {
        isRowActive: false,
      }
    },
    props: {
      articleTitle: String,
      articleContent: String,
    },
    toggleRowFn() {
      this.isRowActive = !this.isRowActive;
      this.showBtnReadContent = true;
    },
  }
</script>

Answer 1

我通常将事件项目的 id 保存在商店(Vuex)或数据(在组件中)。当事件 ID 等于项目 ID 时，我设置相关类，如下例所示。

在数据属性中:

data: function () {
  return {
   activeItemId: ''
  }
}

在方法中:

setActiveItemId(itemIndex) {
    this.activeItemId = itemIndex
}

模板部分:

<ul class="ready-design">
<li class="ready-design__item" v-for="(item, itemIndex) in clipArts">
    <a href="javascript:void(0);"
        class="ready-design__link"
        :class="{'is-chosen': activeItemId === itemIndex}"
        @click="setActiveItemId(itemIndex)">
        <img class="..." width="70" height="70" alt="..." src="...">
    </a>
</li>
</ul>

所以我不需要从非事件项目中删除类。