title: Vue.js To add class active when click and remove the previous one
body: <p>I want to achieve this active link on my div element here you can see the example that i want to do with my code</p>
  
  <p><a href="http://jsfiddle.net/fiddleyetu/9ff79/" rel="noreferrer">http://jsfiddle.net/fiddleyetu/9ff79/</a></p>
  
  <pre><code>$(function() {
    $( 'ul.nav li' ).on( 'click', function() {
          $( this ).parent().find( 'li.active' ).removeClass( 'active' );
          $( this ).addClass( 'active' );
    });
  });
  </code></pre>
  
  <p>in here using vue.js i can't do the active link on my div elements </p>
  
  <p><a href="https://i.stack.imgur.com/GZHBy.png" rel="noreferrer"><img src="https://i.stack.imgur.com/GZHBy.png" alt="image 1"></a></p>
  
  <p><a href="https://i.stack.imgur.com/ctmnV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ctmnV.png" alt="enter image description here"></a></p>
  
  <p>here is my code for the elements on which i have to do the links active </p>
  
  <pre><code>    &lt;div class="conversion"&gt;
      &lt;div class="file has-text-centered icon-active-color" v-on:click="activeiconc"&gt;
          &lt;img src="../imgs/png.png"/&gt;    
          &lt;h4&gt;.PNG&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="file has-text-centered" v-on:click="activeicon" v-bind:class="{ 'icon-active-color':activeiconc,}"&gt;
          &lt;img src="../imgs/pdf.png"/&gt;
          &lt;h4&gt;.PDF&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="file has-text-centered" v-on:click="activeicon" v-bind:class="{ 'icon-active-color':activeiconc }"&gt;
          &lt;img src="../imgs/jpg.png"/&gt;
          &lt;h4&gt;.JPG&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="file has-text-centered" v-on:click="activeicon" v-bind:class="{ 'icon-active-color':activeiconc }"&gt;
          &lt;img src="../imgs/psd.png"/&gt;
          &lt;h4&gt;.PSD&lt;/h4&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>js</p>
  
  <pre><code> export default {
  components: {
    MainLayout
  },
      data: function(){
      return {
        logo: false,
        color:false,
        list:true,
        grid:false,
        deletebtn:false,
        isImageModalActive: false,
        activerow: false,
        activeiconc:false,
      }
    },
    methods:{ 
  
      showgrid:function(){
          this.grid = true;
          this.list = false;
  
      },
      showlist:function(){
          this.list ^=true;
          this.grid = false
      },
      showLogo:function(){
          this.logo ^= true;
          this.color = false; 
          this.deletebtn ^= true;
          this.activerow ^= true
      },
      showColor:function(){
          this.color ^= true;
          this.logo = false;
      },
      activeicon:function(){
          this.activeiconc ^= true;
      }
    }
  }
  </code></pre>