This is what my vuejs methods looks like. Here in the changeRoute function I can change class name by e.target.className = 'clicked'; But when I try to remove that class name from other elements I cant do it by pre.removeClass('clicked'); How can I acplish this ?

<script>   
export default {

  ponents: { 
      
  },
  data() { 
      return {

      }
  },
  methods: {
      changeRoute(e, route) {
           
        var pre = this.$el.querySelector('.clicked');
        if(pre) {
            // pre.removeClass('clicked'); 
        }

        this.$router.push({
            name: route
        }); 
        e.target.className = 'clicked';
          
      }
  },
  mounted() {
      this.$nextTick(() => {
 
      })
  }
}

</script>

This is what my vuejs methods looks like. Here in the changeRoute function I can change class name by e.target.className = 'clicked'; But when I try to remove that class name from other elements I cant do it by pre.removeClass('clicked'); How can I acplish this ?

<script>   
export default {

  ponents: { 
      
  },
  data() { 
      return {

      }
  },
  methods: {
      changeRoute(e, route) {
           
        var pre = this.$el.querySelector('.clicked');
        if(pre) {
            // pre.removeClass('clicked'); 
        }

        this.$router.push({
            name: route
        }); 
        e.target.className = 'clicked';
          
      }
  },
  mounted() {
      this.$nextTick(() => {
 
      })
  }
}

</script>

Also how can push class name rather than replace all by e.target.className = 'clicked';

• javascript
• css
• css-selectors
• vuejs2
• vue-ponent

Share Improve this question Follow asked May 30, 2018 at 8:27 SwadhInSwadhIn 74711 gold badge1010 silver badges1919 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You can use classList.add and classList.remove for this.
But it seems like you want to style link depending on the current route which can be done with vue-router as it adds class on the links matching the current route.
Vue-router active class

If the selected element is part of a li list and class should be added (and consequently removed from previous clicked li), here's a good solution by Herteby on the VueJS Forum

https://forum.vuejs/t/how-to-add-active-class-to-element/28108/2

Use actual Vue to acplish this task. I could explain here how but the Vue page does it quite well.

https://v2.vuejs/v2/guide/class-and-style.html