[Vuejs]-Access a component and trigger click event from App.vue component

by

0👍

Remember Vue has a one way data flow, so if you want to set something on the component you can simply pass a prop and use a watcher to trigger 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
    }
  }
});

Then in the parent you would have:

new Vue({
  el: '#app',
  data: {
    showGallery: false
  }
});

And use the following markup:

<gallery :show="showGallery"></gallery>

See this JSFiddle: https://jsfiddle.net/yx1uq370/

Incidentally, if you just want to show hide the entire component, then you can just use v-show on the component itself which

Vue.component('gallery', {
  template: `<div>Gallery</div>`
});

new Vue({
  el: '#app',
  data: {
    showGallery: false
  }
});

Then your markup:

<gallery v-show="showGallery"></gallery>

And here’s the fiddle for that: https://jsfiddle.net/gfr9kmub/

One final thing, are you sure that you really need to trigger this from your nav? I would assume that your nav would display the views and the views themselves would take care of this type of state management. Otherwise you may want to look at vuex to handle this situation

Leave a comment