Question

所以，我知道如何在普通JS中做到这一点，如果我有一个东西列表，并且希望一次激活一个项目，那么我将从列出的所有项目中删除该类并添加它到被点击的那个不幸的是，由于仍在学习中，我似乎无法在Vue.js中弄清楚。我想仅对被单击的元素触发一个名为“ activeComp”的变量，否则对所有其他被单击的元素将其设置为false，因此一次仅一个项处于活动状态。截至目前，它允许我一次选择一个，但该类仍保留在另一个上。这是我的代码：

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

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

1 个答案: