I am working on a simple Vue application:
App.vue:
<template>
<v-app>
<v-navigation-drawer
app
v-model="drawer"
:mini-variant.sync="mini"
permanent
color="secondary"
dark
>
<v-list-item class="px-2 user-block">
<v-list-item-avatar>
<div class="avatar">JL</div>
</v-list-item-avatar>
<v-list-item-title>John Leider</v-list-item-title>
<v-btn icon @click.stop="mini = !mini">
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
</v-list-item>
<v-divider></v-divider>
<v-list dense>
<v-list-item
v-for="item in items"
:key="item.title"
:href="item.link"
@click.stop="title = item.title"
>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-app-bar app light>
<div class="d-flex align-center">IFRS 9: {{ title }}</div>
<v-spacer></v-spacer>
</v-app-bar>
<v-main>
<router-view />
</v-main>
</v-app>
</template>
<script lang="ts">
import Vue from 'vue'
import router from './router'
export default Vue.extend({
name: 'App',
created() {
const currentPath = router.currentRoute.path
const activeItem = this.items.find((m) => m.link === currentPath)
console.log(activeItem?.title)
this.title = activeItem ? activeItem.title : 'Home'
},
data: () => ({
drawer: true,
items: [
{ title: 'Home', icon: 'mdi-home', link: '/' },
{ title: 'About', icon: 'mdi-help', link: '/about' },
],
mini: true,
title: '',
}),
})
</script>
<style lang="sass">
@import '~vuetify/src/styles/settings/_variables'
.avatar
background-color: #FFFFFF
color: #6D2077
font-weight: bold
width: 48px
height: 48px
line-height: 48px
.user-block
height: 64px
@media #{map-get($display-breakpoints, 'sm-and-down')}
.user-block
height: 56px
</style>
router/index.ts:
import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes: Array<RouteConfig> = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ '../views/About.vue'),
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
})
export default router
In the code above, I am attempting to dynamically change the value of title based on the current route path but it always displays as 'Home'.
Can anyone help me identify what I am doing incorrectly?
P.S. I'm still learning about Vue.