A guide on applying a class to the parent element in VUEjs upon clicking the child menu

Question

A guide on applying a class to the parent element in VUEjs upon clicking the child menu

How can I dynamically add an active class to the <a> element of a sibling <router-link> when clicking on the sub menu in the provided template?

<ul class="depth1">
  <li class="m1">
    <router-link to="/introduce/Introduce" @click="selected = 1" :class="{ active: selected == 1 }"><span>menu1</span></router-link>
    <ul class="depth2 sm1">
      <li><router-link to="" @click="selected = 1">sub menu</router-link></li> 
      <li><router-link to="" @click="selected = 1">sub menu</router-link></li> 
      <li><router-link to="" @click="selected = 1">sub menu</router-link></li> 
    </ul>
  </li> 
   <li class="m2">
    <router-link to="/introduce/Introduce"  @click="selected = 2" :class="{ active: selected == 2 }"><span>menu2</span></router-link>
    <ul class="depth2 sm1">
      <li><router-link to="" @click="selected = 2">sub menu</router-link></li> 
      <li><router-link to="" @click="selected = 2">sub menu</router-link></li> 
      <li><router-link to="" @click="selected = 2">sub menu</router-link></li> 
    </ul>
  </li> 
</ul>

<script>
export default {
  data: function () {
    return {
      selected: false, 
    };
  },
  methods: { 
  },
};
</script>

javascript vue.js

Answer 1

Answer №1

Your approach is almost there, but the issue with the click handler arises from incorrect implementation.

In order to attach a click event to the main element of the <router-link> (specifically, the <a> tag), utilize @click.native:

<router-link to="" @click.native="activateMenu">submenu</router-link>
                         ^^^^^^^

Answer 2

Your approach is almost there, but the issue with the click handler arises from incorrect implementation.

In order to attach a click event to the main element of the <router-link> (specifically, the <a> tag), utilize @click.native:

<router-link to="" @click.native="activateMenu">submenu</router-link>
                         ^^^^^^^

Answer 3

Answer №2

However, why not take advantage of the default behaviors provided by vue-router, such as automatically applying an active class to links when the target route is active? The demo below illustrates this point:

const Home = {
  template: '<div><h2>Home</h2></div>'
}
const About = {
  template: '<div><h2>About</h2></div>'
}

const Users = {
  template: `
    <div>
      <h2>Users</h2>
      <router-view></router-view>
    </div>
  `
}

const User = {
  template: '<div>{{ $route.params.username }}</div>'
}

const router = new VueRouter({
  mode: 'history',
  routes: [{
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/users',
      component: Users,
      children: [{
        path: ':username',
        name: 'user',
        component: User
      }]
    }
  ]
})

new Vue({
  router,
}).$mount('#app')

a.router-link-active {
  color: #f66;
}

li.router-link-active a {
  color: #f66;
}

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Active Links</h1>
  <ul>
    <li>
      <router-link to="/">/</router-link>
    </li>
    <li>
      <router-link to="/" exact>/ (exact match)</router-link>
    </li>

    <li>
      <router-link to="/users">/users</router-link>
    </li>
    <li>
      <router-link to="/users" exact>/users (exact match)</router-link>
    </li>

    <li>
      <router-link to="/users/evan">/users/evan</router-link>
    </li>
    <li>
      <router-link to="/users/evan#foo">/users/evan#foo</router-link>
    </li>
    <li>
      <router-link :to="{ path: '/users/evan', query: { foo: 'bar' }}">
        /users/evan?foo=bar
      </router-link>
    </li>
    <li>
      <!-- #635 -->
      <router-link :to="{ name: 'user', params: { username: 'evan' }, query: { foo: 'bar' }}" exact>
        /users/evan?foo=bar (named view + exact match)
      </router-link>
    </li>
    <li>
      <router-link :to="{ path: '/users/evan', query: { foo: 'bar', baz: 'qux' }}">
        /users/evan?foo=bar&baz=qux
      </router-link>
    </li>

    <li>
      <router-link to="/about">/about</router-link>
    </li>

    <router-link tag="li" to="/about">
      <a>/about (active class on outer element)</a>
    </router-link>
  </ul>
  <router-view class="view"></router-view>
</div>

Answer 4

However, why not take advantage of the default behaviors provided by vue-router, such as automatically applying an active class to links when the target route is active? The demo below illustrates this point:

const Home = {
  template: '<div><h2>Home</h2></div>'
}
const About = {
  template: '<div><h2>About</h2></div>'
}

const Users = {
  template: `
    <div>
      <h2>Users</h2>
      <router-view></router-view>
    </div>
  `
}

const User = {
  template: '<div>{{ $route.params.username }}</div>'
}

const router = new VueRouter({
  mode: 'history',
  routes: [{
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/users',
      component: Users,
      children: [{
        path: ':username',
        name: 'user',
        component: User
      }]
    }
  ]
})

new Vue({
  router,
}).$mount('#app')

a.router-link-active {
  color: #f66;
}

li.router-link-active a {
  color: #f66;
}

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Active Links</h1>
  <ul>
    <li>
      <router-link to="/">/</router-link>
    </li>
    <li>
      <router-link to="/" exact>/ (exact match)</router-link>
    </li>

    <li>
      <router-link to="/users">/users</router-link>
    </li>
    <li>
      <router-link to="/users" exact>/users (exact match)</router-link>
    </li>

    <li>
      <router-link to="/users/evan">/users/evan</router-link>
    </li>
    <li>
      <router-link to="/users/evan#foo">/users/evan#foo</router-link>
    </li>
    <li>
      <router-link :to="{ path: '/users/evan', query: { foo: 'bar' }}">
        /users/evan?foo=bar
      </router-link>
    </li>
    <li>
      <!-- #635 -->
      <router-link :to="{ name: 'user', params: { username: 'evan' }, query: { foo: 'bar' }}" exact>
        /users/evan?foo=bar (named view + exact match)
      </router-link>
    </li>
    <li>
      <router-link :to="{ path: '/users/evan', query: { foo: 'bar', baz: 'qux' }}">
        /users/evan?foo=bar&baz=qux
      </router-link>
    </li>

    <li>
      <router-link to="/about">/about</router-link>
    </li>

    <router-link tag="li" to="/about">
      <a>/about (active class on outer element)</a>
    </router-link>
  </ul>
  <router-view class="view"></router-view>
</div>

A guide on applying a class to the parent element in VUEjs upon clicking the child menu

Answer №1

Answer №2

Similar questions

"Navigate to the URL of the image using the window location

Bringing in an external .js file into nuxt.config.js

Why does the React input value keep its value when the modal is re-rendered, despite the state being updated correctly?

Unveil Secret Divs with a Click

Tracing back the tainted canvas glitch in MDN's demonstration and resolving it

Issue with React select dropdown not properly updating selected value

Testing Tools for AJAX Integration

Locate the nested route within one of the child components in React Router that corresponds to a specific id

Vue js for filtering and replacing prohibited words

Designing a professional networking platform with a feature that allows users to preview their posts before publishing,

`Why my React function calls are not being tested properly with Jest and Sinon?`

How can I use JavaScript to set a background image for a div?

What is the best way to retrieve values from a multi-dimensional array?

Dealing with function scoping problems and transitioning to Arrow Functions

Creating a Server-Side Rendered application from scratch

What is the best way to retrieve the row IDs in react-table?

The most recent version of Autonumeric now permits the inclusion of a decimal point, even if the decimalPlaces parameter

Troubleshooting the lack of communication between multiple Subscribers in RxJS/Angular when sharing one observable

What is the most efficient way to refresh a React component when a global variable is updated?

Obtaining the final href/link without the need to click on it in a javascript call using Selenium