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
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.
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").
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.
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.
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.
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,
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.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With