Vue.$modal.open Cannot Read Property 'open' of Undefined

jay2jam pro asked 3 years ago

Hello,

i am creating several components, also i created 1 Modals.vue, which shoud includes all modals, sure :-)

Now i import this component into App.vue and telephone call them.

From component Content.vue, i want to telephone call a modal, i am using a MDB standard Modal. Commonly it should work similar that, likewise i go no errors, so compiling is fine. Merely nothing happens, when i click on mdb-button.

Do i have to miss anything?

Rgds

---

Mikołaj Smoleński staff answered three years ago

Hullo Stefan,

So everything is fine ;) No we tin motion to the 2nd part of Your projection - emiting shut event. Yous'll need to make a method for all close events, like this:

                              <mdb-modal  side position="top-right" five-if="showModal5" @close="closeModal">             <mdb-modal-header class="divider-outside-bottom">                 <mdb-modal-title><img src="../avails/ecommerce-icon.png" class="img-fluid modalIcons"> <span class="modalTitle">Unsere eCommerce Angebote</span></mdb-modal-title>             </mdb-modal-header>             <mdb-modal-body>                 <div course="container">                      Hier kommt der Text rein                  </div>             </mdb-modal-trunk>             <mdb-modal-footer>                 <mdb-btn apartment size="lg" darkWaves  @click.native="closeModal"><img form="img-fluid modalBackIcon" src="../assets/pointer-right.png"/></mdb-btn>             </mdb-modal-footer>         </mdb-modal>         import { mdbModal, mdbModalHeader, mdbModalTitle, mdbModalBody, mdbModalFooter,      mdbBtn, mdbInput, mdbTextarea, mdbIcon } from 'mdbvue';     consign default {     name: 'Overlays',     components: {       mdbModal,   mdbModalHeader,   mdbModalTitle,   mdbModalBody,   mdbModalFooter,   mdbBtn,   mdbInput,   mdbTextarea,   mdbIcon }, props: {   prove: {     blazon: Boolean,     default: fake   } }, data() {   render {     showModal5: this.prove   } }, methods: {    closeModal() {        this.showModal5 = faux;        this.$emit('closeModal');    } }, watch: {   show(newVal) {     this.showModal5 = newVal;   } }                          

And so in Your App.vue You take to become the closeModal outcome:

                              <template>         <div>             <Overlays :show="bear witness" @closeModal="closeModal" />             <button @click="openModal">Open</button>         </div>     </template>     (...)      import Overlays from '@/components/Overlays.vue';           export default {            name: 'App',           components: {           Overlays          },          data() {             return {              bear witness: false            }           },           methods: {            openModal() {                  this.show= true            },             closeModal() {                 this.evidence= false            }           }          }                          

---

Mikołaj Smoleński staff answered iii years agone

Hello,

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

              <Modal :prove="truthful" ...></Modal>                          

The prop value should exist triggered by a function, e.x. later on button click.

Then Yous will take to watch for the prop changes inside Your ain component. For instance:

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

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

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

All-time regards

---

jay2jam pro answered 3 years ago

Hello Mikolaj,

i did this in App.vue(parent):

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

In Overlay.vue i did this:

                              information() {   return {     showModal5: simulated   } }, watch: {   bear witness(newVal) {     this.showModal5 = newVal;   } }                          

I get this alarm:

              [Vue warn]: Mistake 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

---

Mikołaj Smoleński staff answered 3 years agone

Hi Stefan,

Information technology'due south almost right ;) The easiest mode volition be similar this:

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

In Overlay.vue:

                              props: {     show: {       type: Boolean,       default: simulated      }     },    information() {      return {        showModal5: this.bear witness      }     },     spotter: {       prove(newVal) {         this.showModal5 = newVal;       }     }                          

Information technology should work at present.

Best regards

---

Mikołaj Smoleński staff answered three years ago

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

                              data() {      return {        showModal: simulated      }    }                          

Best regards

---

jay2jam pro answered 3 years ago

Same problem :-/

Overlay:

                              <mdb-modal  side position="top-correct" 5-if="showModal5" @close="showModal5 = imitation">         <mdb-modal-header form="divider-outside-lesser">             <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-trunk>             <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="../avails/pointer-right.png"/></mdb-btn>         </mdb-modal-footer>     </mdb-modal>     import { mdbModal, mdbModalHeader, mdbModalTitle, mdbModalBody, mdbModalFooter,  mdbBtn, mdbInput, mdbTextarea, mdbIcon } from 'mdbvue'; export default { proper name: 'Overlays', components: {   mdbModal,   mdbModalHeader,   mdbModalTitle,   mdbModalBody,   mdbModalFooter,   mdbBtn,   mdbInput,   mdbTextarea,   mdbIcon }, props: {   show: {     type: Boolean,     default: fake   } }, information() {   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: simulated    }   },   methods: {    openModal() { showModal5 = truthful    }    }    }                          

Rgds Stefan

---

Mikołaj Smoleński staff answered 3 years agone

In Your App.vue it should be:

                              <template>         <div>             <Overlays :show="testify"/>             <push button @click="openModal">Open</button>         </div>     </template>     (...)      import Overlays from '@/components/Overlays.vue';           export default {            proper name: 'App',           components: {           Overlays          },          information() {             return {              show: false            }           },           methods: {            openModal() { this.show= true            }            }            }                          

Rgds

---

jay2jam pro answered 3 years ago

Howdy Mikolaj,

cheers then much, merely it doesn't work :-/ Now i can open the modal and close, but i can't reopen once again.

I get no errors.

Rgds Stefan

---

jay2jam pro answered 3 years ago

Yep this did the trick thx for it :-)

---

jay2jam pro answered 3 years agone

Sad Mikolaj, i have to enquire you lot once again. This is working just i get a alert:

                              [Vue warn]: Avert mutating a prop directly since the value volition exist overwritten whenever       the parent component re-renders. Instead, employ a data or computed property based on the      prop's value. Prop existence mutated: "show"   constitute in   ---> <ModalImpressum> at src/modals/site/ModalImpressum.vue    <Footer> at src/components/Footer.vue      <App> at src/App.vue        <Root>                          

Office of Modal template:

              <mdb-modal  side position="pinnacle-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  grade="img-fluid modalBackIcon" src="../../assets/pointer-right-grey.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: {   evidence: {     type: Boolean,     default: false   } }, data() {   return {     impressum: this.show   } }, directives:{   'sticky': Mucilaginous }, methods: {   closeModal() {     this.show = false;     this.$emit('closeModal');   } }, watch: {   show(newVal) {     this.impressum = newVal;   } }   }                          

Call from Footer:

                              <ModalImpressum :prove="testify" @closeModal="closeModal" />  <mdb-btn @click="openModal" apartment class="hullo-icon hullo-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 }, information() {   return {     prove: false   } }, directives:{   'sticky': Sticky }, methods: {   openModal() {     this.bear witness= true   },   closeModal() {     this.show= false   }   }    }                          

Thx once more

---

Mikołaj Smoleński staff answered iii years ago

Hi there once more,

Every bit the warning says - Y'all should avoid mutating prop. You just demand to update closeModal method in Modal Component to this:

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

Best regards

---

Please insert min. 20 characters.

santiagocordes.blogspot.com

Source: https://mdbootstrap.com/support/vue/call-modals-from-other-components/

Share this post