Vue operates with a unidirectional data flow, meaning if you need to modify something within the component, you can pass a prop and utilize a watcher for triggering the change:
Vue.component('gallery', {
template: `<div v-show="gallery">Gallery</div>`,
props: {
show: {
type: Boolean,
default: false
}
},
created() {
this.gallery = this.show;
},
watch: {
show(val) {
this.gallery = val;
}
},
data() {
return {
gallery: false
}
}
});
In the parent component, include:
new Vue({
el: '#app',
data: {
showGallery: false
}
});
Then implement the following code in your markup:
<gallery :show="showGallery"></gallery>
View the JSFiddle example here: https://jsfiddle.net/yx1uq370/
If you only want to toggle visibility of the entire component, you can simply use v-show directly on the component as demonstrated below:
Vue.component('gallery', {
template: `<div>Gallery</div>`
});
new Vue({
el: '#app',
data: {
showGallery: false
}
});
Your updated markup would be:
<gallery v-show="showGallery"></gallery>
Refer to this fiddle for that implementation: https://jsfiddle.net/gfr9kmub/
Lastly, consider whether triggering this from your navigation is necessary. It might be more suitable for views to handle state management autonomously. Alternatively, look into using Vuex for managing such scenarios.