Disable a component in a specific case in Vue.js

Question

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.

Vamsi Krishna · Accepted Answer · 2018-07-18 11:05:03Z

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

edited Jul 18, 2018 at 11:05

answered Jul 18, 2018 at 10:23

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

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

1 Comment

Konrad Kalemba Over a year ago

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.

Julian Paolo Dayag · Accepted Answer · 2018-07-18 10:28:13Z

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);

}

edited Jul 18, 2018 at 10:28

answered Jul 18, 2018 at 10:13

Julian Paolo Dayag

3,7473 gold badges24 silver badges33 bronze badges

Comments

Imre_G · Accepted Answer · 2018-07-18 10:54:46Z

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>

edited Jul 18, 2018 at 10:54

answered Jul 18, 2018 at 10:12

Imre_G

2,5251 gold badge20 silver badges36 bronze badges

5 Comments

Brooke Holmes Over a year ago

Surely it would be cleaner to just return (window.location.href === myroute)? It already resolves to a boolean, no need for individual returns

Imre_G Over a year ago

Answered too fast :)

Julian Paolo Dayag Over a year ago

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.

Imre_G Over a year ago

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.

Benjamin Landry Over a year ago

Thanks for your answer, but it does not seem to work. I get this error : "Property or method "window" is not defined ..."

Collectives™ on Stack Overflow

Disable a component in a specific case in Vue.js

3 Answers 3

1 Comment

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related