@dauren101
Python, PHP developer

Присвоить класс актив родителю router link vue.js?

<ul  class="nav flex-column nav-pills side-nav" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            <li class="list-group-item"> <router-link to="/nutrition/foodmenu">Перспективное меню</router-link></li>
            <li class="list-group-item"><router-link to="/nutrition/journal">Журнал питания</router-link></li>
           <li class="list-group-item"><router-link to="/nutrition/ambarbook">Амбарная книга</router-link></li>
        </ul>

При клике на router-link ему присваивается класс router-link-exact-active router-link-active. Вопрос: Как родителю т.е тегу LI присвоить класс activ?Есть ли какое нибудь элегантное решение.
  • Вопрос задан
  • 36 просмотров
Решения вопроса 1
bootd
@bootd
Гугли и ты откроешь врата знаний!
<template>
  <ul  class="nav flex-column nav-pills side-nav" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <li 
      class="list-group-item"
      v-for="(menuItem, index) in menu"
      :key="index"
      :class="{
        active: $route.path === menuItem.url
      }"
    >
      <router-link :to="menuItem.url">
        {{ menuItem.title }}
      </router-link>
    </li>
  </ul>
</template>


export default {
  data: () => ({
    menu: [
      {
      	title: 'Перспективное меню',
        url: '/nutrition/foodmenu'
      },
      {
      	title: 'Журнал питания',
        url: '/nutrition/journal'
      },
      {
      	title: 'Амбарная книга',
        url: '/nutrition/ambarbook'
      }
    ]
  })
}


Или коротко:
<ul  class="nav flex-column nav-pills side-nav" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  <li class="list-group-item" :class="{ active: $route.path === '/nutrition/foodmenu' }"> <router-link to="/nutrition/foodmenu">Перспективное меню</router-link></li>
  <li class="list-group-item" :class="{ active: $route.path === '/nutrition/journal' }"><router-link to="/nutrition/journal">Журнал питания</router-link></li>
  <li class="list-group-item" :class="{ active: $route.path === '/nutrition/ambarbook' }"><router-link to="/nutrition/ambarbook">Амбарная книга</router-link></li>
</ul>

т.е. ручками у каждого пункта, иных решений нет.
P.S. это самое галимое решение!
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Aetae
@Aetae
Тлен
Или просто сделать так:
<ul class="nav flex-column nav-pills side-nav" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  <router-link tag="li" class="list-group-item" active-class="activ" to="/nutrition/foodmenu">Перспективное меню</router-link>
  <router-link tag="li" class="list-group-item" active-class="activ" to="/nutrition/journal">Журнал питания</router-link>
  <router-link tag="li" class="list-group-item" active-class="activ" to="/nutrition/ambarbook">Амбарная книга</router-link>
</ul>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы