Не обновляется элемент
<NavbarLink
v-for="(page, index) in publishedPages"
:key="index"
:page="page"
:index="index"
></NavbarLink>
Первоначально отрисовывается нормально и при обновлении страницы тоже появляются новые данные.
При нажатии на кнопку срабатывает
bus.$emit('page-updated', {
index,
page,
});
в консоли все данные обновляются и в publishedPages в консоли тоже появляются изменения. но данные на странице обновляются только после нажатия F5
// NavBar.vue
<template>
<nav :class="[`navbar-${theme} bg-${theme}`, 'navbar', 'navbar-expand-lg']">
<div class="container-fluid">
<a href="#" class="navbar-brand">My Vue</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<!-- тут ничего не меняется -->
<NavbarLink
v-for="(page, index) in publishedPages"
:key="index"
:page="page"
:index="index"
></NavbarLink>
<li>
<router-link to="/pages" class="nav-link" aria-current="page" active-class="active">
Pages
</router-link>
</li>
</ul>
<form class="d-flex">
<button class="btn btn-primary" @click.prevent="changeTheme()">Toggle Dark Mode</button>
</form>
</div>
</nav>
</template>
<script>
import NavbarLink from '../components/NavbarLink';
export default {
components: {
NavbarLink,
},
inject: ['$pages', '$bus'],
created() {
this.getThemeSetting();
this.pages = this.$pages.getAllPages();
this.$bus.$on('page-updated', () => {
this.pages = this.$pages.getAllPages();
console.log(this.pages); // тут изменения есть
});
},
computed: {
publishedPages() {
console.log('publishedPages');
const newPages = Array.isArray(this.pages) ? this.pages.filter((p) => p.published) : [];
console.log(newPages); // тут тоже есть изменения
return newPages;
},
},
data() {
return {
theme: 'light',
pages: [],
};
},
methods: {
// ...
},
};
</script>
// NavbarLink.vue
<template>
<li>
<router-link
:to="`/${index}`"
class="nav-link"
active-class="active"
aria-current="page"
:title="`This link goes to the ${page.link.text} page`"
>
{{ page.link.text }}
</router-link>
</li>
</template>
<script>
export default {
props: ['page', 'index'],
};
</script>
// Events.js
const events = new Map();
export default {
$on(eventName, fn) {
console.log('on');
console.log(events);
if (!events.has(eventName)) {
events.set(eventName, []);
}
events.get(eventName).push(fn);
},
// eslint-disable-next-line no-unused-vars
$off(eventName, fn) {
throw { message: 'Not implemented' };
},
$emit(eventName, data) {
console.log(events);
if (events.has(eventName)) {
console.log('emit');
events.get(eventName).forEach((fn) => fn(data));
}
},
};
upd:
// в localStorage данные есть, зачем так сделано не понятно, но это работает
// там массив из таких элементов
// {
// "link": { "text": "Home", "url": "index.html" },
// "pageTitle": "Home page",
// "content": "This is the Home content",
// "published": true
// },
const pagesKey = 'pages';
const pagesJson = localStorage.getItem(pagesKey);
const pagesStore = JSON.parse(pagesJson);
export default {
getAllPages() {
return pagesStore;
},
// ...
};
upd:
работает с
:key="Math.random()"
но нужно ли создавать такие ключи? плюсы такого подхода не гуглятся
