Call modals from other components

Hello,

You have to pass the main modal state to the appropriate component. In most cases it can be done by passing it as a prop. For example:

<Modal :show="true" ...></Modal>

The prop value should be triggered by a function, e.x. after button click.

Then You will have to watch for the prop changes inside Your own component. For example:

watch: {
   show(newVal) {
      this.showModal = newVal;
   }
}

And then inside Modal.vue the mdb-modal should appeal to the showModal value, e.x.:

<mdb-modal v-if="showModal " ... >

Best regards

Hello Mikolaj,

i did this in App.vue(parent):

<Overlays :show="true" />
<button @click="openModal">Open Modal</button>
 methods: {
openModal() { this.$refs.showModal5.show()
}

In Overlay.vue i did this:

  data() {
  return {
    showModal5: false
  }
},
watch: {
  show(newVal) {
    this.showModal5 = newVal;
  }
}

I get this warning:

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'show' of undefined"

Sorry, but i am new to vue and mdb vue

Rgds and thx for helping me Stefan

Hi Stefan,

It's almost correct ;) The easiest way will be like this:

<Overlays :show="showModal" />
<button @click="openModal">Open Modal</button>

methods: {
 openModal() { this.showModal = true
}

In Overlay.vue:

   props: {
    show: {
      type: Boolean,
      default: false
     }
    },
   data() {
     return {
       showModal5: this.show
     }
    },
    watch: {
      show(newVal) {
        this.showModal5 = newVal;
      }
    }

It should work now.

Best regards

You need also to define showModal in Your App.vue like this:

   data() {
     return {
       showModal: false
     }
   }

Best regards

Same problem :-/

Overlay:

 <mdb-modal  side position="top-right" v-if="showModal5" @close="showModal5 = false">
        <mdb-modal-header class="divider-outside-bottom">
            <mdb-modal-title><img src="../assets/ecommerce-icon.png" class="img-fluid modalIcons"> <span class="modalTitle">Unsere eCommerce Angebote</span></mdb-modal-title>
        </mdb-modal-header>
        <mdb-modal-body>
            <div class="container">

                Hier kommt der Text rein

            </div>
        </mdb-modal-body>
        <mdb-modal-footer>
            <mdb-btn flat size="lg" darkWaves  @click.native="showModal5 = false"><img class="img-fluid modalBackIcon" src="../assets/arrow-right.png"/></mdb-btn>
        </mdb-modal-footer>
    </mdb-modal>



 import { mdbModal, mdbModalHeader, mdbModalTitle, mdbModalBody, mdbModalFooter, 
mdbBtn, mdbInput, mdbTextarea, mdbIcon } from 'mdbvue';
export default {
name: 'Overlays',
components: {
  mdbModal,
  mdbModalHeader,
  mdbModalTitle,
  mdbModalBody,
  mdbModalFooter,
  mdbBtn,
  mdbInput,
  mdbTextarea,
  mdbIcon
},
props: {
  show: {
    type: Boolean,
    default: false
  }
},
data() {
  return {
    showModal5: this.show
  }
},
watch: {
  show(newVal) {
    this.showModal5 = newVal;
  }
}

}

App.vue:

Open Modal

import Overlays from '@/components/Overlays.vue';

 export default {
   name: 'App',
  components: {
  Overlays
 },
 data() {
    return {
     showModal5: false
   }
  },
  methods: {
   openModal() { showModal5 = true
   }
   }
   }

Rgds Stefan

In Your App.vue it should be:

    <template>
        <div>
            <Overlays :show="show"/>
            <button @click="openModal">Open</button>
        </div>
    </template>   

(...)
     import Overlays from '@/components/Overlays.vue';

         export default {
           name: 'App',
          components: {
          Overlays
         },
         data() {
            return {
             show: false
           }
          },
          methods: {
           openModal() { this.show= true
           }
           }
           }

Rgds

Hello Mikolaj,

thank you so much, but it doesn't work :-/ Now i can open the modal and close, but i can't reopen again.

I get no errors.

Rgds Stefan

Yes this did the trick thx for it :-)

Sorry Mikolaj, i have to ask you again. This is working but i get a warning:

    [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever 
     the parent component re-renders. Instead, use a data or computed property based on the 
    prop's value. Prop being mutated: "show"

 found in

 ---> <ModalImpressum> at src/modals/site/ModalImpressum.vue
   <Footer> at src/components/Footer.vue
     <App> at src/App.vue
       <Root>

Part of Modal template:

<mdb-modal  side position="top-right" v-if="impressum" @closeModal="closeModal">
 <mdb-modal-header v-sticky>
<mdb-modal-title> <span class="modalTitle">Impressum</span></mdb-modal-title>
<mdb-btn flat size="xs" darkWaves  @click="closeModal" class="modalHeaderButton"><img 
class="img-fluid modalBackIcon" src="../../assets/arrow-right-gray.png"/></mdb-btn>
 </mdb-modal-header>
  <mdb-modal-body>

Modal Component:

import { mdbModal, mdbModalHeader, mdbModalTitle, mdbModalBody, mdbModalFooter, 
mdbBtn, mdbInput, mdbTextarea, mdbIcon, mdbCol, mdbRow,Sticky } from 'mdbvue';
export default {
name: 'ModalImpressum',
components: {
  mdbModal,
  mdbModalHeader,
  mdbModalTitle,
  mdbModalBody,
  mdbModalFooter,
  mdbBtn,
  mdbInput,
  mdbTextarea,
  mdbIcon,
  mdbCol,
  mdbRow
},
props: {
  show: {
    type: Boolean,
    default: false
  }
},
data() {
  return {
    impressum: this.show
  }
},
directives:{
  'sticky': Sticky
},
methods: {
  closeModal() {
    this.show = false;
    this.$emit('closeModal');
  }
},
watch: {
  show(newVal) {
    this.impressum = newVal;
  }
}
  }

Call from Footer:

 <ModalImpressum :show="show" @closeModal="closeModal" />
 <mdb-btn @click="openModal" flat class="hi-icon hi-icon-archive text- 
 muted">Impressum</mdb-btn> <span class="ibull">&bull;</span>


  export default {
    name: 'Footer',
    components: {
      mdbModal, mdbModalHeader, mdbModalTitle, mdbModalBody, mdbModalFooter, 
     mdbBtn, mdbInput, mdbTextarea, mdbIcon,    mdbCard,
     mdbCardBody, mdbContainer, mdbRow, mdbCol, mdbTooltip, mdbJumbotron, 
    ModalImpressum
},
data() {
  return {
    show: false
  }
},
directives:{
  'sticky': Sticky
},
methods: {
  openModal() {
    this.show= true
  },
  closeModal() {
    this.show= false
  }
  }
   }

Thx again

Hi there again,

As the warning says - You should avoid mutating prop. You just need to update closeModal method in Modal Component to this:

methods: {
  closeModal() {
    this.impressum = false;
    this.$emit('closeModal');
  }
},

Best regards

Hi there again,

This article can be very helfpful for You: https://mdbootstrap.com/articles/vue/vuex-or-emit-basics-of-communication-between-vue-components/

Best!