Toggle modal dialog from parent component in VUE

Question

So i want to toggle my modal dialog from parent component and i tried each step mentioned here Stack Overflow Question about same Topic , but still my Modal Dialog is not visible and it even has undefined value when i see from VUE console. and in Elements section the modal dialog div is not created.

MY MODAL DIALOG is not showing in elements section on webpage, but showing in Vue console with undefined prop value. But Click effect is working from Parent component. and modal is setting true when i click on div.

My Parent Code

<template>
    <div class="collection">
        <section class="section section-elements">
            <div class="elements-outer" @click="openModal">
                 <CopyComponent v-bind:item="item"/>                            
           </div>
        </section>
        <modal v-modal="modal"/>
    </div>
</template>
<script>
import Modal from "../components/Modal.vue";
export default {
    name: 'Collection',
    components: {
        Modal
    },
    data() {
        return {
            modal: false
        }
    },
    methods: {
        openModal() {
            this.modal = !this.modal;
        }
    }

}
</script>

My Child Component

<template>
<div v-if="value" class="modal">
    <div class="body">
        body
    </div>
    <div class="btn_cancel" @click="modalToggle">
        <i class="icon icon-cancel" />
    </div>
</div>
</template>

 <script>
   export default {
   name: "Modal",
   props: ["value"],
   methods: {
    modalToggle() {
      this.$emit("input", !this.value);
    }
  }
};
</script>

am i missing anything?

Please help, thanks.

Both of answer worked if not using bootstrap, but if someone using Bootstrap then he has to remove default bootstrap classes and use custom classes with custom css.. For more info please visit: adamwathan.me/2016/01/04/… See accepted answer on this post: stackoverflow.com/questions/42890385/… — gautam

mare96 mare96 · Accepted Answer · 2020-04-08T12:49:03

Your prop is called value so you need to pass it from parent component, also assign event for toggle modal.

<modal :value="modal" @toggle="modalToggle"/>

And in your child:

<template>
<div v-if="value" class="modal">
    <div class="body">
        body
    </div>
    <div class="btn_cancel" @click="modalToggle">
        <i class="icon icon-cancel" />
    </div>
</div>
</template>
<script>
   export default {
   name: "Modal",
   props: ["value"],
   methods: {
    modalToggle() {
      this.$emit("toggle");
    }
  }
}
</script>

Toggle modal dialog from parent component in VUE

2 Answers