Hide a component in Vue.js

Question

Is there a way with which I can control the rendering of a shared component in another component? I have a component which is a bottom bar which needs to be disabled/ not rendered in a few concrete components.

I am rendering the bottom bar in a template which is being used by all the components.

EDIT: I am using webpack

Sounds like the shared component should take a prop indicating whether it should render. — Roy J
– Roy J, Commented Jun 22, 2017 at 15:24

Kees de Kooter · Accepted Answer · 2018-01-24 14:42:44Z

8

As Roy said, you could have a property that conditions the rendering of the component, as such (assuming you're using vue-loader):

<template>
  <div v-if="shouldRender">
    <!-- ... -->
  </div>
</template>

<script>
export default {
  props: ['shouldRender']
}
</script>

then, in your parent component:

<template>
  <div>
    <!-- ... -->
    <BottomBar :should-render="showBottomBar" />
  </div>
</template>

<script>
export default {
  data () {
    return {
       showBottomBar: true
    }
  },
  methods: {
    toggleBottomBar () {
      this.showBottomBar = !this.showBottomBar
    }
  }
}
</script>

edited Jan 24, 2018 at 14:42

Kees de Kooter

7,2135 gold badges42 silver badges47 bronze badges

answered Jun 22, 2017 at 16:40

fixmycode

8,5242 gold badges32 silver badges45 bronze badges

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

2 Comments

RayanFar Over a year ago

what if the button was in another component, not the parent?

fixmycode Over a year ago

the button should have an event emitter for clicks, you'd bind the toggleBottomBar to that emitter <MyCustomButton @click="toggleBottomBar">

Mixa · Accepted Answer · 2017-06-22 17:20:56Z

Use vue-router

const Header = {template: '<div>component header</div>'}
const Main = {template: '<div>component main</div>'}
const Footer = {template: '<div>component footer</div>'}

const router = new VueRouter({
  routes: [
    { 
      path: '/link1', 
      components: {
        header: Header,
        main: Main,
        footer: Footer
      }
    },
    { 
      path: '/link2', 
      components: {
        header: Header,
        main: Main
      }
    }
  ]
})

const app = new Vue({ router }).$mount('#app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.6.0/vue-router.min.js"></script>

<div id="app">
  <router-link to="/link1">/link1</router-link>
  <router-link to="/link2">/link2</router-link>

  <router-view class="" name="header"></router-view>
  <router-view class="" name="main"></router-view>
  <router-view class="" name="footer"></router-view>
</div>

Collectives™ on Stack Overflow

Hide a component in Vue.js

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related