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

Posted 2023-02-23

【中文标题】删除所有项目的类并将类添加到 Vue.js 中的单击项目

【英文标题】：Remove Class for All Items and Add Class to Clicked Itemin Vue.js

【发布时间】：2019-04-08 11:53:35

【问题描述】：

所以，我只知道如何在 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>

非常感谢您对此的任何帮助。

【参考方案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 方法中处理。

【讨论】：

太棒了，工作得很好！谢谢，感谢您的帮助！

这个答案不仅有帮助，还教会了我解决问题的新方法。谢谢。