CODEWITHSUNDEEP
vuejs3vue-sfc
Luxerion
Luxerion

Reputation: 15

Accessing element instance inside :class conditional statement in Vue3 SFC

Using a Single File Component, how can the element be accessed during a colon prefixed conditional evaluation like

:class

I tried doing:

<RouterLink to="/post-container" :class="{'is-active': (el) => subIsActive(el)}">Link Name</RouterLink>

but then the conditional doesn't work since it's not trying to execute an event handler.

My goal is check each link in a side nav menu to see which one is active according to the URL and then if it is active, change the CSS class selectors accordingly.

Upvotes: 1

Views: 42

Answers (1)

Alexander Nenashev
Alexander Nenashev

Reputation: 22734

The RouterLink component adds two CSS classes to active links, router-link-active and router-link-exact-active.

You can customize class names:

<RouterLink :active-class="blah" :exact-active-class="blah2"/>

https://router.vuejs.org/guide/essentials/active-links.html#Active-links

If you want to access <a> my guess a sure way is to use a directive:

<script setup>
const vMount = {
    mounted(el, { value }) {
        value(el);
    }
};
</script>
<template>
  <RouterLink v-mount="el => el.classList.toggle('active', /* some condition here */)"/>
</template>

Upvotes: 1

Related Questions