为所有项目删除 Class 并将 Class 添加到 Vue.js 中单击的项目

Question

所以，我知道如何在 vanilla JS 中做到这一点，如果我有一个事物列表并希望一次激活一个项目，我会从所有项目中删除 class列出的项目并将其添加到被单击的项目。不幸的是，我似乎无法在 Vue.js 中弄明白，因为我仍在学习它。我想触发一个名为 'activeComp' 的变量，仅针对被点击的元素为真，并为所有其他被点击的元素设置为假，因此一次只有一个项目处于活动状态。截至目前，它允许我一次 select 一个，但 class 保留在其他人身上。这是我的代码：

<div v-if="companions.length > 0" v-for="companion in companions">

  <comp-item :companionData="companion"></comp-item>

</div>



<template>

  <div class='companion-item' @click="toggleActive" :class="{ active: activeComp }">
    <h3>{{ companionData.name }} <span class='desc'>({{ companionData.desc }})</span></h3>
  </div>

</template>

<script>
  export default {
    props: ['companionData'],
    data() {
      return {
        activeComp: false
      };
    },
    methods: {
      toggleActive() {
        this.activeComp = !this.activeComp;
      }
    }
  }
</script>

非常感谢任何帮助。

Answer 1

由于此时只有 1 个活动项，您应该在父组件中跟踪当前活动项：

<div 
  v-if="companions.length > 0" 
  v-for="(companion, index) in companions" 
  :key="index">
  <comp-item :companionData="companion" 
             :isActive="activeIndex === index" 
             @onToggle="onToggle(index)">
  </comp-item>
</div>

<script>
  ...
    data() {
      return {
        activeIndex: null
      };
    },
    methods: {
      onToggle(index) {
        if (this.activeIndex === index) {
          this.activeIndex = null;
        } else {
          this.activeIndex = index;
        }
      }
    }
    ...
</script>

然后在子组件中，您可以向父组件发出点击事件：

<template>

  <div class='companion-item' @click="toggleActive" :class="{ active: isActive }">
    <h3>{{ companionData.name }} <span class='desc'>({{ companionData.desc }})</span></h3>
  </div>

</template>

<script>
  export default {
    props: ['companionData', 'isActive'],
    data() {
      return {
      };
    },
    methods: {
      toggleActive() {
        this.$emit('onToggle')
      }
    }
  }
</script>

当用户点击一个项目时，事件将发送给父级并在 onToggle 方法中处理。

为所有项目删除 Class 并将 Class 添加到 Vue.js 中单击的项目

Remove Class for All Items and Add Class to Clicked Itemin Vue.js

vue.js

vue-component

vuejs2

v-for