typescript - VueJS & TS : Error on hiding a component on specific page

Question

I have a VueJS project where I want to hide a component (Navigation Drawer) on the login page. It's working but I have an error and I can't build my app.

I'm using vue router by the way.

My component is splitted in 3 files (.vue, .html, .ts)

He is my .ts file with the error :

Do someone have any idea how can I still hide my component on the login page without the error so I can build my app ?

Thank you !

Here is my NavigationDrawer.ts file :

import Vue from 'vue'
export default Vue.extend({
    name: "NavigationDrawer",
    data: () => ({
        items: [
            { title: 'Accueil', icon: 'mdi-home-city', link: '/index' },
            { title: 'Magasins', icon: 'mdi-file-table-box-outline', link: '/magasins' },
            { title: 'Page 2', icon: 'mdi-file-table-box-multiple-outline', link: '/page2' },
            { title: 'Paramètres', icon: 'mdi-cog-outline', link: '/settings' },
        ],
    }),
    computed: {
        isLogin() {
            return !['Login'].includes(this.$route.name)
        }
    }
})

Antoine

question from:https://stackoverflow.com/questions/65886746/vuejs-ts-error-on-hiding-a-component-on-specific-page

Answer 1

Not 100% sure as I use vuex to store user login and then simple v-if's on specific components in App.vue to show or hide components as desired. This is also in the context of a index.js file the vue-router with beforeEach hooks. With that said, computed properties are cached so it appears that your isLogin computed property is returning the error when this.$route.name is "undefined" at build. I believe that something along the lines of below may work.

`isLogin() {
 return this.$route.name != "undefined" 
      ? !['Login'].includes(this.$route.name)
      : false (or true depending on your desire)

}`

Again, not 100% sure as I am not fully aware of the approach you are using. Either way, hope someone else can provide the solution if this isn't it.