Я хочу, чтобы моя панель навигации применяла другой стиль к текущей странице.
Я создал компонент, который проходит по каждой ссылке.В цикле я хочу передать URL текущей ссылки методу, который проверит, совпадает ли URL текущей страницы с URL ссылки.Если это новый стиль, будет применен.
component.js
module.exports = {
data: function() {
return {
links: [
{name: 'Projects', url: "/admin"},
{name: 'Archives', url: "/archives"},
{name: 'Information', url: "/information/1/edit"},
{name: 'Footer', url: "/footer/edit"},
]
}
},
computed: {
currentPage: {
get: function() {
return window.location.pathname
}
},
activePage: {
get: function() {
this.links.forEach((item) => {
item.currentpage = this.currentPage
item.active = false
if (item.url === item.currentpage) { item.active = true}
})
}
}
}
}
component.html
<ul v-for="link in this.links">
<li>
<a :href="link.url" :class="{active: link.active}">{{link.name}}</a>
</li>
</ul>
1) Я не могу передать переменную из: class для вычисляемого свойства или метода компонента.
2) В текущей схеме компонент отображает массив только с одной ссылкой со свойством {active: true}.Тем не менее, класс: не ответит на это.