Routerlink isExactActive change image Vue

Question

Is there a way to do something like this:

<router-link to="/">
        <img src=" :active = isExactActive ? pic_active.png : pic_inactive.png}}" /> //Somethink like this
        <div class="text">Home</div>
</router-link>

Img src should be depending on whether link is exact active or not. If active pic_active should show, if not active pic-inactive should show. How can I make this work? I am a beginner to vue and I have been searching for hours...

Thanks!

Answer 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>