Блог

Главная - Вопросы по программированию - Как добавить класс к родительскому при нажатии дочернего меню в VueJS

Как добавить класс к родительскому при нажатии дочернего меню в VueJS

#javascript #vue.js

#javascript #vue.js

Вопрос:

Когда я нажимаю sub menu на следующий шаблон, как мне добавить active класс в <a> класс родственного <router-link> ( menu1 или menu2 )?

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

Комментарии:

1. Я не вижу ни одного родительского элемента «a»

2. @Ayudh <router-link> <a> По умолчанию используется корневой элемент.

Ответ №1:

Ваша попытка близка к работе, но click обработчик не вызывается, потому что он применяется неправильно.

Чтобы добавить click обработчик к корневому элементу <router-link> (т.Е. <a> Тегу), используйте @click.native :

 <router-link to="" @click.native="selected = 1">sub menu</router-link>
                         ^^^^^^^

Ответ №2:

но почему бы не использовать vue-router поведение по умолчанию (ссылка автоматически получает активный класс, когда активен целевой маршрут), как показано на демонстрации ниже

 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=baramp;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>