In my VueJS project, I attempted to include custom buttons in the sub navigation menu which could be customized for each view. Initially, I tried adding a simple property to the main data element, but that didn't yield the desired results. Then, I came across the concept of mixins, however, that approach also failed. Here's what I have so far:
// main.js
new Vue({
//...
mixins: [{
data() {
return {
customHeaderButtons: [],
test: '123'
};
}
}],
})
<!-- TheHeader.vue -->
<template>
<CHeader>
<CSubheader class="px-3">
<CBreadcrumbRouter class="border-0" />
<CHeaderNav v-if="$root.customHeaderButtons" class="ml-auto" style="min-height: 0">
<CHeaderNavLink v-for="item in $root.customHeaderButtons">
<CIcon :name="item.iconName" />
</CHeaderNavLink>
{{$root.customHeaderButtons}}
</CHeaderNav>
{{$root.test}} -> 123
</CSubheader>
</CHeader>
</template>
<!-- MyView.vue -->
<template>
{{test}} -> ABC
</template>
<script>
export default {
data() {
return {
customHeaderButtons: [{
iconName: 'cil-save'
}],
test: 'ABC'
}
},
// ...
}
</script>
Can anyone explain why the value change from MyView.vue is not reflected in the header? In theory, when the user navigates to MyView.vue, the text in the header bar should switch to ABC.
PS: Please note that TheHeader is part of the template and not contained within the view itself!
<!-- TheContainer.vue -->
<template>
<div class="c-app">
<TheSidebar/>
<div class="c-wrapper">
<TheHeader/> <-- Data from any child view should be sent here <---+
<div class="c-body"> |
<main class="c-main"> |
<CContainer fluid> |
<transition name="fade"> |
<router-view></router-view> <-- This is where MyView goes ----+
</transition>
</CContainer>
</main>
</div>
<TheFooter/>
</div>
</div>
</template>