title: Remove Class for All Items and Add Class to Clicked Itemin Vue.js
body: <p>So, I know how to do this in just vanilla JS, where if I have a list of things and want one item to be active at a time, I'd remove the class from all of the items listed and add it to the one that was clicked. Unfortunately, I cannot seem to figure it out in Vue.js, as I am still learning it. I am wanting to trigger a variable named 'activeComp' as true just for the clicked element, and make it false for all the other clicked elements, so only one item is active at a time. As of right now, it will allow me to select one at a time, but the class remains on the others. Here is my code:</p>
  
  <pre><code>&lt;div v-if="companions.length &gt; 0" v-for="companion in companions"&gt;
  
    &lt;comp-item :companionData="companion"&gt;&lt;/comp-item&gt;
  
  &lt;/div&gt;
  
  
  
  &lt;template&gt;
  
    &lt;div class='companion-item' @click="toggleActive" :class="{ active: activeComp }"&gt;
      &lt;h3&gt;{{ companionData.name }} &lt;span class='desc'&gt;({{ companionData.desc }})&lt;/span&gt;&lt;/h3&gt;
    &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      props: ['companionData'],
      data() {
        return {
          activeComp: false
        };
      },
      methods: {
        toggleActive() {
          this.activeComp = !this.activeComp;
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>Any help on this is much appreciated.</p>