0

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 component I created 'date-picker'. I need it in most of the components I will load in the router-view. My problem is that I would, if possible, disable it when I load a specific component in the router-view.

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

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

Thanks in advance.

3 Answers 3

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",
      component: Foo,
      meta: { requiresDatePicker: true }
    },
    {
      path: "/bar",
      component: 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 comments

Sign up to request clarification or add additional context in comments.

1 Comment

Great use of a route's meta object. Hovewer it can be done easier without involving Vuex. Putting v-if="$route.meta.requiresDatePicker" to the date-picker node will do the same work more efficient and with less effort.
1

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

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

Then in your component, add a computed property for referencing the state:

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

then on the date-picker component add a condition:

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

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

mounted() {

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

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

}

Comments

0

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

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

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

5 Comments

Surely it would be cleaner to just return (window.location.href === myroute)? It already resolves to a boolean, no need for individual returns
Answered too fast :)
this is only useful for single case. where only one component is being checked, if you also expand this to handle multiple components, it doesn't really give you the flexibility to toggle the datepicker anytime/anywhere.
I agree, but the question is to toggle it when a specific component is loaded. Not multiple components. If you want that then there are indeed better solutions.
Thanks for your answer, but it does not seem to work. I get this error : "Property or method "window" is not defined ..."

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.