我的菜单是由 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>
最佳答案
您可能希望使用非 Vue 解决方案来存储最后单击的元素:https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
关于javascript - 如何使用带有 vue js 的计算和 Prop 将事件样式应用于菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54326737/