CODEWITHSUNDEEP
javascriptvue.js
Fiorella Del Solar
Fiorella Del Solar

Reputation: 399

How to access the router prop in VUE

I have declared a route to which I want to pass a prop to show one or another header in my index component, but I cannot access the prop in any way ...

  {
    path: '/tienda/:id',
    name: 'tienda',
    component: InicioSistema,
    props: { headersistema: true, }
  },

In my Header.vue

    <div v-if="this.$route.props.headersistema">
A header...
    </div>
    <div v-else>
Show Other header..
    </div>

Upvotes: 0

Views: 71

Answers (2)

LastM4N
LastM4N

Reputation: 2230

<script>
    export default {
        props: ['headersistema'],
    };
</script>

in order to test add the below inside script:

 mounted() {
        if (this.headersistema){
            console.log(this.headersistema, 'headersistema')
           
        }
    },

Upvotes: 0

Leonardo Bezerra
Leonardo Bezerra

Reputation: 735

Remove this from v-if. Vue already binds this when templating.

<template>
    <div v-if="$route.props.headersistema">A header...</div>
    <div v-else>Show Other header..</div>
</template>

Upvotes: 1

Related Questions