[Vuejs]-Routerlink isExactActive change image Vue

by

-1👍

There are multiple ways to do this, but I would suggest to either use a computed property (https://v2.vuejs.org/v2/guide/computed.html) to contain the source, something like

<router-link to="/">
        <img src="{{ imageLink }}" /> <!-- Something like this -->
        <div class="text">Home</div>
</router-link>

// your component
export default {
   computed: {
       imageLink: isExactActive ? 'pic_active.png' : 'pic_inactive.png',
   }
}

or use a v-if (https://v2.vuejs.org/v2/guide/conditional.html):

<router-link to="/">
        <img v-if="isExactActive" src="pic_active.png" />
        <img v-else src="pic_inactive.png" /> <!-- Something like this -->
        <div class="text">Home</div>
</router-link>

Leave a comment