Как применить активный стиль к меню, используя computed and props with vue js - PullRequest
Новая
       25

Как применить активный стиль к меню, используя computed and props with vue js

0 голосов
/ 23 января 2019

Мое меню создается с помощью v-for, в данных у меня есть этот массив объектов, в котором он устанавливает все атрибуты, которые мне нужны для li и href.Каждый раз, когда я нажимаю в меню, страница перезагружается, и мне нужно установить текущее меню страницы активным с некоторым стилем.Я пробовал v-bind, но, похоже, он теряет стиль при каждой перезагрузке страницы.Итак, как я могу сделать это с помощью компьютера и реквизита? 

<template>

    <div>
        <ul>
            <li v-for="link of links" :id="link.id" class="btn-menu"><a class="page-link" :href="link.to">{{ link.menu }}</a></li>
        </ul>
    </div>

</template>

<script>

    export default {

        data(){
            return {
                links: [
                    {
                        id       : 1,
                        title    : 'Resumos',
                        to       : '/juridico/app/?pag=sys/casos/casos-resumos.php',
                        isActive : false,
                        location : 'first',
                        menu : 'Resumo'
                    },
                    {
                        id       : 2,
                        title    : 'Pesquisa',
                        to       : '/juridico/app/?pag=sys/casos/casos-pesquisa.php',
                        isActive : false,
                        location : 'first',
                        menu     : 'Pesquisa'
                    },
                    {   
                        id       : 3,
                        title    : 'Valores',
                        to       : '#',
                        isActive : false,
                        location : 'second',
                        menu     : 'Valores'
                    }
                ]
            }
        }

    }
</script>

<style scoped>

    .btn-menu {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 3px;
        margin: 10px;
        font-size: 1.2em;
        background: transparent;
        border: 1px solid #0082c3;
    }

    .active{
        background-color: #0082c3;
    }

</style>

Ответы [ 2 ]

0 голосов
/ 26 января 2019

Возможно, вы захотите использовать не-Vue решение для хранения того элемента, который был выбран последним: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

0 голосов
/ 23 января 2019

Возможно, вы можете поместить функцию mounted() в свой компонент .vue (https://vuejs.org/v2/api/#mounted), и внутри этой функции вы можете проверить, где вы находитесь, изменить свойство isActive внутри объекта (или добавить новое свойство). контролировать это) и динамически добавить класс (https://vuejs.org/v2/guide/class-and-style.html), примерно так: 

<li v-for="link of links" :id="link.id" class="btn-menu" v-bind:class="{ active: link.isActive }">
  <a class="page-link" :href="link.to">{{ link.menu }}</a>
</li>
...