title: VueJS add remove class on click
body: <p>I have a "menu" with colors, and when the user click one of the div's, it should add an active class, and remove all other active classes from the others div... How do I do this in VUE? </p>
  
  <pre><code>&lt;div class="choose-color__primary" style="width:400px"&gt;
                              &lt;div class="light" v-on:click="selectColor($event)" :style="{'background-color': LightenDarkenColor(colors.primaryColor, 30)}"&gt;&lt;/div&gt;
                              &lt;div class="light" v-on:click="selectColor($event)" :style="{'background-color': LightenDarkenColor(colors.primaryColor, 15)}"&gt;&lt;/div&gt;
                              &lt;div class="light" v-on:click="selectColor($event)" :style="{'background-color': LightenDarkenColor(colors.primaryColor, 0)}"&gt;&lt;/div&gt; &lt;!-- This is the color the user has chosen from color wheel --&gt;
                              &lt;div class="dark" v-on:click="selectColor($event)" :style="{'background-color': LightenDarkenColor(colors.primaryColor, -15)}"&gt;&lt;/div&gt;
                              &lt;div class="dark" v-on:click="selectColor($event)" :style="{'background-color': LightenDarkenColor(colors.primaryColor, -30)}"&gt;&lt;/div&gt;
                          &lt;/div&gt;
  </code></pre>
  
  <p>I know that i in my selectColor() function could do something like:</p>
  
  <pre><code>event.target.parentNode.classList.remove("active");
              event.target.className = "active";
  </code></pre>
  
  <p>However, just thought there was a better way in VUE than manipulating the DOM directly this this? </p>