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: https://adamwathan.me/2016/01/04/composing-reusable-modal-dialogs-with-vuejs/ See accepted answer on this post: https://stackoverflow.com/questions/42890385/open-bootstrap-modal-with-vue-js-2-0 — gautam, Apr 08 '20 at 13:38

score 2 · Answer 1 · answered Apr 08 '20 at 12:39

2

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

answered Apr 08 '20 at 12:39

Sadraque Santos

1,779
1
12
15

but still the modal dialog is not opening, it has display none in style under inspect element .. only the content is visible under inspect elements – gautam Apr 08 '20 at 12:42
It might be a problem in your css, try removing the `modal` class from your modal component. I tested your code myself whithout any styles and everything works fine. – Sadraque Santos Apr 08 '20 at 12:54
but without having modal class, i wouldn't be able to inherit bootstrap default style and Functionality of modal dialog. i need that class – gautam Apr 08 '20 at 12:56
Are you using vue bootstrap? Because I'm almost sure that pure css bootstrap won't work as you plan. – Sadraque Santos Apr 08 '20 at 13:01
Try vue-bootstrap instead, it should solve your problems and you will not need to build every component by yourself. – Sadraque Santos Apr 08 '20 at 13:34
no already mentioned, i didn't want to use extra plugin so using and creating own components and css classes.. but thanks for the help..comment section is already updated with all important infos. – gautam Apr 08 '20 at 13:40

score 2 · Accepted Answer · answered Apr 08 '20 at 12:49

2

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>

answered Apr 08 '20 at 12:49

mare96

3,749
1
16
28

The first reply has solved the problem... Value is changing, click effect is working, div is being created when i click.. but the modal dialog has display none by default because of modal class..Thats why it is not showing up, do you know how to solve it? – gautam Apr 08 '20 at 12:54
@gautam what about using [vue-js-modal](https://github.com/euvl/vue-js-modal)? – mare96 Apr 08 '20 at 13:11
already tried show, not working... and don't wanna use extra plugin – gautam Apr 08 '20 at 13:16
What's happening when you have by default `modal: true` in your data and also class show? – mare96 Apr 08 '20 at 13:19
1

Check this answer https://stackoverflow.com/questions/42890385/open-bootstrap-modal-with-vue-js-2-0 – mare96 Apr 08 '20 at 13:22

Toggle modal dialog from parent component in VUE

2 Answers2