BootstrapVue: Triggering Modal from a child component

Hi there,

I’m working on small project for a record label: https://auf-ewig-winter.netlify.com/

Here’s the repository: https://github.com/stevefrenzel/auf-ewig-winter

I recently worked a lot with React but always wanted to dive into Vue.js and Bootstrap, so here I am. :grin:

I’m having the following the problem:

When clicking either the “ARTISTS” or “LEGAL NOTICE” link inside the Navigation.vue component, it should open the respective Bootstrap modal inside the parent component. They’re called ModalArtists.vue and ModalLegalNotice.vue.

I know that methods flow down, so it should be located inside the parent component App.vue. If you want to pass data to the parent, you need to emit it.

As I’m still wrapping my head around passing props in Vue.js and working with Bootstrap, I would like to ask the community how to solve this little issue.

I would also appreciate any feedback regarding my file structure, for instance if I can do something “the vue way”. :slightly_smiling_face: For example the transitions: They should be working, but they’re not and I have no idea why…

Thank you very much in advance and have a great day,

Steve

Hello @stvfrnzl,

I have shown one way to achieve what you are trying to do over your artists nav. check out the bellow link

There are several elements, which are easy to understand. please follow the Vue documents.

Hi @prabhat903,

thank you so much for your quick response, this helped me a lot! :slight_smile:

Just to understand the data flow:

In App.vue (parent), these two data objects are set to false by default:

data() {
  return {
    artistModal: false,
    legalNoticeModal: false
  };
}

When clicking “ARTISTS” or “LEGAL NOTICE” in Navigation.vue (child), the click handler also contains the id of the data object. Depending on the user choice it will emit a string to the parent component:

methods: {
  showModal(id) {
    { id === 'artists' ? this.$emit('showArtistModal') : null }
    { id === 'legalNotice' ? this.$emit('showLegalNoticeModal') : null }
  }
}

Here’s where I’m stuck again. I would like to use a single function that checks if the emitted data is either showArtistModal or showLegalNoticeModal. Right now - in App.vue (parent) - I’m using two methods but this approach doesn’t seem very DRY:

showArtistModal() { this.artistModal = true },
showLegalNoticeModal() { this.legalNoticeModal = true }

I would rather do something like this but I can’t process the data coming from Navigation.vue:

showModal() {
  if (check if 'showArtistModal') {
    this.artistModal = true;
  }
  if (check if 'showLegalNoticeModal') {
    this.legalNoticeModal = true;
  }
}

I’ve updated the repository, would be great if you could take a look at it again if you have some time.

Thank you in advance!

you are absolutely correct using DRY is always good.

so instead of using two methods you should use the same method and pass the id and check it in your parent. like we do lifting state Up in react we can do lifting logic Up here.

Please check the updates

Thank you so much, it’s all working now! :clap: