bootsrap modal not showing vue 3-CodePudding

I use vue 3 with bootsrap 5.

        <b-button @click="showModal" ref="btnShow">Open Modal</b-button>
        <b-modal ref="my-modal">
            <div >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>

CodePudding user response：

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 >Hello From My Modal!</div>
  </b-modal>
</template>
    

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

EDIT: or with function:

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

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

CodePudding user response：

On the modal, you set and id, not a ref. Try changing that.