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
– gautam, Commented Apr 8, 2020 at 13:38

mare96 · Accepted Answer · 2020-04-08 12:49:03Z

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 8, 2020 at 12:49

mare96

3,8541 gold badge22 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

gautam Over a year ago

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?

mare96 Over a year ago

@gautam what about using vue-js-modal?

gautam Over a year ago

already tried show, not working... and don't wanna use extra plugin

mare96 Over a year ago

What's happening when you have by default modal: true in your data and also class show?

mare96 Over a year ago

Check this answer stackoverflow.com/questions/42890385/…

Sadraque Santos · Accepted Answer · 2020-04-08 12:39:10Z

2

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

answered Apr 8, 2020 at 12:39

Sadraque Santos

1,8491 gold badge15 silver badges15 bronze badges

6 Comments

gautam Over a year ago

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

Sadraque Santos Over a year ago

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.

gautam Over a year ago

but without having modal class, i wouldn't be able to inherit bootstrap default style and Functionality of modal dialog. i need that class

Sadraque Santos Over a year ago

Are you using vue bootstrap? Because I'm almost sure that pure css bootstrap won't work as you plan.

Sadraque Santos Over a year ago

Try vue-bootstrap instead, it should solve your problems and you will not need to build every component by yourself.

|

Collectives™ on Stack Overflow

Toggle modal dialog from parent component in VUE

2 Answers 2

5 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related