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.
Ну надо же... всё совершенно спокойно работает если записать так:
<li class="nav-item" v-if="this.$route.name === 'PersonDetails'">
Answered by A K on December 9, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP