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

Question

所以，我只知道如何在 vanilla JS 中执行此操作，如果我有一个事物列表并希望一次激活一个项目，我会从列出的所有项目中删除该类并添加它到被点击的那个。不幸的是，我似乎无法在 Vue.js 中弄清楚，因为我还在学习它。我想为单击的元素触发一个名为“activeComp”的变量为真，并为所有其他单击的元素设置为假，因此一次只有一个项目处于活动状态。截至目前，它允许我一次选择一个，但该课程仍保留在其他课程上。这是我的代码：

<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 方法中处理。