CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvue-router
Jacob Bruce
Jacob Bruce

Reputation: 65

Hide child component/route until called in Vue.js

I understand that the child component is called inside the parent render() function, but is there a way to hide it until it is called, for say, by a button.

Say this is your router file

{
    path:'/products',
    name: 'Products',
    component: Products,
    children: [
      {
        path: ':subtype',
        name: 'Subtype',
        component: ItemSubtypes
      }
    ]
  },

Now say I want to hide Subtype until you click a button to go to /products/subtype. Is there a way to do this or do I need to not use child routes?

The reason for this is that when you visit just /products the component of Subtype has no data and is thus empty. I would rather not render it yet if possible.

Upvotes: 0

Views: 670

Answers (1)

Wahab Shah
Wahab Shah

Reputation: 2266

Use v-if, until data is loaded the condition will be false. Or set a flag to truthy after button click, initially being falsey.

Upvotes: 1

Related Questions