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!

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

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

Yes this did the trick thx for it :-)

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

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

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

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

   data() {
     return {
       showModal: false
     }
   }

Best regards

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

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

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