TransWikia.com

Обновление v-if при смене route

Stack Overflow на русском Asked on December 9, 2021

У меня на сайте есть компонент боковой панели, содержащий контекстные ссылки:

<template>
  <ul class="navbar-nav">
    <li class="nav-item" v-if="this.$router.currentRoute.name === 'PersonDetails'">
      <router-link
        :to="{ name: 'PersonHistory', params: { id: this.$router.currentRoute.params.id } }"
        >история изменений карточки</router-link>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'NavigationSidebar',
};
</script>

Проблема в том, что при клике на ссылку в sidebar сам переход происходит на новый route, но не происходит изменения отрисовки компонента, хотя условия в v-if’ах уже должны были скрыть одни пункты и показать другие.

В сети в похожих случаях встречаются рекомендации использовать beforeRouteUpdate, но непонятно, какой хук жизненного цикла компонента вызвать. (Ну и логично, что можно watch вспомнить — проблема та же: что вызывать при изменениях?)

Также видел рекомендацию использовать key для router-view, попробовал её, а также наугад попробовал на уровне template компонента задать — ни то, ни то не помогло. 🙁

Перешерстил документацию, натолкнулся на любопытный вариант с v-bind:is но увы, там нельзя указать строку, нужен компонент:

  computed: {
    currentTabComponent() {
      return this.$router.currentRoute.name;
    },
  },

поэтому выдаёт ошибку ‘[Vue warn]: Unknown custom element: – did you register the component correctly?’

Что можно в данном случае сделать? Vue 2.6.11, типовой router в режиме history.

One Answer

Ну надо же... всё совершенно спокойно работает если записать так:

<li class="nav-item" v-if="this.$route.name === 'PersonDetails'">

Answered by A K on December 9, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP