bootsrap modal not showing vue 3

Question

I use vue 3 with bootsrap 5.

        <b-button @click="showModal" ref="btnShow">Open Modal</b-button>
        <b-modal ref="my-modal">
            <div class="d-block">Hello From My Modal!</div>
        </b-modal>






    export default {
        methods: {
            showModal() {
                this.$refs['my-modal'].show()
            },
        }
    }

When i can open modal with help function modal dont open and i get error concole:

 this.$refs.my-modal.show is not a function

If i using Emitting events on $root the window doesn't open either without error.

the same error with:

<b-button id="show-btn" @click="$bvModal.show('bv-modal-example')">Open Modal</b-button>
<b-modal id="bv-modal-example" hide-footer> ff  </b-modal>

Update:

Modal componet:

 <modal-form :formats="formats" :formatAttr =  "format">
    <template #open>
    <b-button  v-b-modal.my-modal >Добавить формат</b-button>

    </template>
  
  </modal-form>

Other component

<template>
 
      
  <b-modal v-model="modalShow">
    <div class="d-block">Hello From My Modal!</div>
  </b-modal>
  <b-button  variant="outline-danger" block @click="hideModal">Close Me</b-button>

</template>
    

export default {
    data() {
        return {
            modalShow: false
        }
    },
    methods: {
        hideModal(){
             this.modalShow = false;
        },
         showModal(){
             this.modalShow = true;
        }
    }
}
    

This dont work:

<slot  @click="showModal()" name="open"></slot>

If i do with the example above class "modal-backdrop fade show" dont remove and no items are available

How i can close modal if i use slot for hide button?

Answer 1

You could use a ref and v-model to do it:

<template>
  <b-button @click="modalShow = true">open</b-button>
      
  <b-modal v-model="modalShow">
    <div class="d-block">Hello From My Modal!</div>
  </b-modal>
</template>
    

export default {
    data() {
        return {
            modalShow: false
        }
    }
}

EDIT: or with open function:

<template>
  <b-button @click="open()">open</b-button>
      
  <b-modal v-model="modalShow">
    <div class="d-block">Hello From My Modal!</div>
  </b-modal>
</template>
    

export default {
    data() {
        return {
            modalShow: false
        }
    },
    methods: {
        open(){
             this.modalShow = true;
        }
    }
}

EDITEDIT: or with toggle function

<template>
  <b-button @click="toggle()">{{modalShow ? "close" : "open"}}</b-button>
      
  <b-modal v-model="modalShow">
    <div class="d-block">Hello From My Modal!</div>
  </b-modal>
</template>
    

export default {
    data() {
        return {
            modalShow: false
        }
    },
    methods: {
        toggle(){
             this.modalShow = !this.modalShow;
        }
    }
}

or with own close Button inside modal:

<template>
  <b-button @click="open()">open</b-button>
      
  <b-modal v-model="modalShow">
    <div class="d-block">Hello From My Modal!</div>
    <button class="btn btn-danger" data-bs-dismiss="modal" @click="close()">close</button>
  </b-modal>
</template>
    

export default {
    data() {
        return {
            modalShow: false
        }
    },
    methods: {
        open(){
             this.modalShow = true;
        },
        close(){
          // do something on close
        }
    }
}