I looked for how to do it but I did not find an answer to my problem anywhere.

Let me explain, I have my page in which I load a ponent I created 'date-picker'. I need it in most of the ponents I will load in the router-view. My problem is that I would, if possible, disable it when I load a specific ponent in the router-view.

<main>
  <date-picker></date-picker>
  <router-view></router-view>
</main> 

Is there a solution, other than nesting my 'date-picker' ponent in the ponents they use? I use Vuex if it helps.

Thanks in advance.

I looked for how to do it but I did not find an answer to my problem anywhere.

Let me explain, I have my page in which I load a ponent I created 'date-picker'. I need it in most of the ponents I will load in the router-view. My problem is that I would, if possible, disable it when I load a specific ponent in the router-view.

<main>
  <date-picker></date-picker>
  <router-view></router-view>
</main> 

Is there a solution, other than nesting my 'date-picker' ponent in the ponents they use? I use Vuex if it helps.

Thanks in advance.

• javascript
• vue.js
• vuejs2
• vue-router
• vuex

Share Improve this question Follow asked Jul 18, 2018 at 10:04 Benjamin LandryBenjamin Landry 311 silver badge22 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

One way of doing is to set up a meta field requiresDatePicker: true on the routes you want to show the datepicker

const router = new VueRouter({
  routes: [
    {
      path: "/foo",
      ponent: Foo,
      meta: { requiresDatePicker: true }
    },
    {
      path: "/bar",
      ponent: Bar,
      meta: { requiresDatePicker: false }
    }
  ]
});

Then use the meta property on the route object to check if the particular route has to render the datepicker or not

<main>
  <date-picker v-if="$route.meta.requiresDatePicker"></date-picker>
  <router-view></router-view>
</main> 

credits to @Konrad K for mentioning out in the ments

In your vuex, add a new state. Let's say, showDatePicker:

{
    state: {
        showDatePicker: false
    },
    mutation: {
        showDatePicker(state, show) {
            state.showDatePicker = show;
        }
    }
}

Then in your ponent, add a puted property for referencing the state:

import { mapState } from 'vuex'
...
puted: {
    ...mapState(['showDatePicker'])
}

then on the date-picker ponent add a condition:

 <date-picker v-if="showDatePicker"></date-picker>

then on the mounted callback on each page ponents, you can just toggle the value depending if you want to show the date picker or not:

mounted() {

    //show
    this.$store.mit('showDatePicker', true);

    //hide
    this.$store.mit('showDatePicker', false);

}

The easiest way is to use window.location.href and check for your route there. Then add a v-if on your ponent. Something like this:

<main>
  <date-picker v-if = "enableDatePicker"></date-picker>
  <router-view></router-view>
</main>

<script>
export default {
    puted: {
        enableDatePicker: {
              return (window.location.href === myroute)
         }
    }
}
</script>