Как передать переменную из класса v-bind: в шаблоне HTML в метод компонента? - PullRequest
0 голосов
/ 17 апреля 2019

Я хочу, чтобы моя панель навигации применяла другой стиль к текущей странице.

Я создал компонент, который проходит по каждой ссылке.В цикле я хочу передать 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}.Тем не менее, класс: не ответит на это.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...