Bootstrap Vue Modal Component

Question

I'm looking to make a global Bootstrap Vue Modal component that I can use for all of my modal needs.

The issue I am facing is that it keeps giving me an error regarding prop mutation. You cannot update them directly in the child component. Which makes sense.

This is what I have so far:

<template>
    <b-modal
        v-model="show"
        size="lg"
        scrollable
        centered
        header-class="event-close-modal-header"
        @hide="$emit('close')"
        @cancel="$emit('close')"
        @ok="$emit('close')"
        @show="handleShow"
    >
        <template #modal-title="{}">
            <span class="event-close-modal-header-mc2">{{ title }}</span>
        </template>

        <b-container fluid class="pb-4">
            <h1>Content goes here</h1>
            <slot />
        </b-container>
    </b-modal>
</template>

<script>
export default {
    props: {
        show: {
            type: Boolean,
            default: false,
            required: true,
        },
        title: {
            type: String,
            required: true,
        },
    },
    data() {
        return {};
    },
};
</script>

And in my parent I have something like this:

<ModalHelper
  :show.sync="modalOne" // modalOne is a data property
  title="One"
  @close="modalOne = false"
/>

<button @click="modalOne = true">Open Modal One</button>

Error:

Adding :visible="show" did it for me in <b-modal>. But I'm still curious how others would solve this. — Riza Khan
– Riza Khan, Commented Sep 16, 2021 at 12:56

AlekJnk · Accepted Answer · 2021-09-17 20:47:13Z

1

You can't use props in v-model. Try watch it, and copy new value into new variable in data:

data() {
   return {
      showModal: false
   }
},
watch: {
   show(newValue) {
     this.showModal = newValue;
   }
}

now use showModal in your code instead of "show".

However, this is no good approach. You should open-close bootstrap vue modals using:

$bvModal.show() $bvModal.hide()

Vue Bootstrap Modal

answered Sep 17, 2021 at 20:47

AlekJnk

964 bronze badges

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

Collectives™ on Stack Overflow

Bootstrap Vue Modal Component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related