javascript - 如何使用带有 vue js 的计算和 Prop 将事件样式应用于菜单

Question

我的菜单是由 v-for 生成的，在数据​​中我有这个对象数组，它设置了我需要的所有属性到 li 和一个 href。每次我单击菜单时，页面都会重新加载，我需要将页面的当前菜单设置为以某种样式激活。我试过 v-bind 但每次页面重新加载时它似乎都失去了风格。那么我该如何使用 computed 和 props 来做到这一点呢？

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

Answer 1

您可能希望使用非 Vue 解决方案来存储最后单击的元素:https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage