Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide a component in Vue.js

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

like image 978
manjith dungdung Avatar asked Jun 22 '17 13:06

manjith dungdung


People also ask

How do I hide a button on click Vue?

To hide div on click in Vue. js, we can use the v-if directive. to add the isHidden reactive property by returning it in the object in the data method. And then we add 2 buttons.

How do you hide a component in JavaScript?

Style display property is used to hide and show the content of HTML DOM by accessing the DOM element using JavaScript/jQuery. To hide an element, set the style display property to “none”. document. getElementById("element").

What is V cloak?

The v-cloak directive is a Vue. js directive that will remain on the element until the associated Vue instance finishes compilation. Combined with CSS rules such as [v-cloak] { display: none }, this directive can be used to hide uncompiled mustache bindings until the Vue instance is ready.

What is V show in Vue?

The v-show directive is a Vue. js directive used to toggle the display CSS property of a element with our data via inline styles. If the data is true it will make it visible else it will make it invisible.

How to show/hide an element depending on vuejs data property?

Problem: You want to show/hide an element depending on VueJS data property. Solution: For this let’s consider a very basic VueJS Instance which only has a single data property named count, and depending on the value of count we’ll show or hide the element in the dom.

Is there a way to hide action with jQuery and Vue?

As @samayo mentions, there isn't a difference between the hide action from jQuery vs Vue, so another way to do this is to trigger the jQuery through the @click function. The Vue Dev kit will tell you not to mix JS inline with @click events and I had the same problem as @user9046370 trying to put the jQuery command inline with @click, so anyway,

What is a Vue component?

When not using a build step, a Vue component can be defined as a plain JavaScript object containing Vue-specific options: The template is inlined as a JavaScript string here, which Vue will compile on the fly.

Why should I use Vue instead of HTML?

It's common for an app to be organized into a tree of nested components: This is very similar to how we nest native HTML elements, but Vue implements its own component model that allow us to encapsulate custom content and logic in each component. Vue also plays nicely with native Web Components.


1 Answers

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>
like image 161
fixmycode Avatar answered Nov 15 '22 10:11

fixmycode