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.

Answer 1

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>

Answer 2

You misspelled v-model in <modal v-modal="modal"/> , it should be <modal v-model="modal"/>