Question

0

73

Vistas

Bootstrap Vue Modal Component

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:

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-13T08:23:18.086Z

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