Access a component and trigger click event from App.vue component

Question

In my template I have one click event

<span v-on:click="showGalery()">

And I am using one method for it

export default {
  name: 'osaka',
  data: function () {
    return {
      galery: false,
    }
  },
  methods: {
    showGalery () {
      this.galery = true
    }
  }
}

Is it possible to trigger this method from App.vue template where is my nav and router links is located?

I am using vue-webpack template. I have components, router.js, App.js and main.js structure.

So this is in a child component and you want to trigger it from the parent? Or handle it in the parent? — Isak Berglind
If your "osaka" component is far from your App.vue, you should probably use the flux pattern to trigger showGalery() from everywhere. — Kyllian Vinkler
@Isak, I using osaka.vue component where I have an html to trigger, App.vue contain navigation with router-link. App.vue is always visible so I guess it's parent. I want to trigger (show/hide) some html in component from navigation. — Milan Milosev

craig_h craig_h · Accepted Answer · 2017-06-06T09:29:13

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

Access a component and trigger click event from App.vue component

1 Answers