Создание активного класса в меню в Vue - PullRequest
Новая
       7

Создание активного класса в меню в Vue

0 голосов
/ 14 октября 2018

Я пытаюсь получить доступ к элементу привязки в вычисляемом свойстве, чтобы определить, должен ли он быть активным или оставаться как есть.

Я видел примеры использования v-for и циклического прохождениясвойства данных, но это статическое меню, подобное следующему: 

<template>
<div class="panel panel-default">
    <div class="panel-heading">Application Menu</div>
    <ul class="list-group">
        <a :href="route('applications.index')" 
           :class="activeClass" 
           class="list-group-item">Applications</a>
        <a :href="route('applications.repository')" 
           :class="" 
           class="list-group-item">Token Repository</a>
        <a :href="route('applications.notifications')" 
           :class="" 
           class="list-group-item">Notifications</a>
    </ul>
</div>
</template>

Моя activeClass вычисленная опора сравнила бы href текущего якоря с текущим местоположением браузера и вернула active, еслиони совпадают.

Я просмотрел всю документацию на веб-сайте Vue и активно гуглил, но пока не нашел способа получить доступ к атрибуту href якоря, вызывающего вычисляемое свойство.

Ответы [ 3 ]

0 голосов
/ 14 октября 2018

Вы думаете об этом неправильно.Вы не должны пытаться получить доступ к атрибутам элементов DOM, как если бы они были данными.DOM не является хранилищем данных.Данные должны быть в вашей модели представления и использоваться в DOM.

У вас должен быть массив объектов, описывающих ваши элементы.(Кроме того, единственными разрешенными дочерними элементами ul являются li.) Вы можете сделать что-то вроде этого: 

<ul class="list-group">
    <li v-for="item in menuItems">
      <a :href="item.route" 
         :class="isActive(item)" 
         class="list-group-item">{{model.label}}</a>
    </li>
</ul>

Если вы хотите, чтобы computed работал для каждого из ваших предметов, вам нужно будет сделать компонент для каждого элемента.См. vuejs, использующий вычисленное свойство для элементов массива

0 голосов
/ 14 октября 2018

Окончательное решение: 

<template>
<div class="panel panel-default">
    <div class="panel-heading">Application Menu</div>
    <ul class="list-group">
        <a :href="route('applications.index')" 
           :class="activeClass('applications')" 
           class="list-group-item">Applications</a>
        <a :href="route('applications.repository')" 
           :class="activeClass('repository')" 
           class="list-group-item">Token Repository</a>
        <a :href="route('applications.notifications')" 
           :class="activeClass('notifications')" 
           class="list-group-item">Notifications</a>
    </ul>
</div>
</template>

<script>

export default {
    data () {
        return {
            currentLink: location.href,
        }
    },
    computed: {
        routes() {
            return window.routes
        },
    },
    mounted() {
        this.setCurrentLink()
    },
    methods: {
        route(url) {
            return this.routes.route(url)
        },
        activeClass(segment) {
            return segment == this.currentLink ? 'active' : ''
        },
        setCurrentLink() {
            this.currentLink = new URL(location.href).pathname.split('/').pop();
        }
    }
}
</script>

Отлично работает без необходимости повторения цикла.Я называю это редким случаем использования, но для чего-то небольшого и статичного он отвечает всем требованиям.

Спасибо всем, кто внес свой вклад.

0 голосов
/ 14 октября 2018

Вы не можете этого сделать, и вот почему.Вычисляемое свойство должно быть универсальным.То есть его значение не определяется тем, кто к нему обращается.Если вы обращаетесь к this.activeClass изнутри метода, его значение должно быть таким же, как activeClass внутри шаблона, при условии, что информация о состоянии, от которой он зависит, одинакова.(И кто обращается к ней, это не информация о состоянии)

Если вы используете Vue-Router, вы можете просто сравнить значение $ route.path и использовать другой класс.Например: 

<a :href="route('applications.index')" 
   :class="$route.path === 'whatever' ? 'active-class' : 'inactive-class'">Applications</a>
...