I have been trying to toggle my modal dialog from the parent component using the steps mentioned in a related Stack Overflow Question. However, I am facing an issue where my modal dialog is not visible and appears to have an undefined value when checked in the VUE console. Additionally, the modal dialog div is not being created in the Elements section of the webpage.
The modal dialog is not showing in the elements section on the webpage, but it does appear in the Vue console with an undefined prop value. Strangely enough, the click effect is working from the Parent component, as the modal is set to true upon clicking the div.
Parent Component 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-model="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>
Child Component Code
<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>
Is there something I might be missing?
Your help would be greatly appreciated. Thank you.