bootsrap模式没有显示vue3

Question

我将vue 3与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()
},
}
}

当我可以用帮助功能打开模态时，模态不打开，我得到错误代码：

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

如果我在$root上使用Emitting事件，那么该窗口也不会打开而没有错误。

与相同的错误

<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>

更新：

模态组件：

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

</modal-form>

其他组件

<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;
}
}
}

这不起作用：

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

如果我用上面的例子"；模式背景渐变显示"；不要删除并且没有可用的项目

如果我使用插槽隐藏按钮，我如何关闭模态？

Answer 1

您可以使用ref和v-model来实现这一点：

<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
}
}
}

编辑：或具有打开功能：

<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：或具有切换功能

<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;
}
}
}

或在模式：内有自己的close按钮

<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
}
}
}

Answer 2

在模态上，您设置和id，而不是ref。请尝试更改它。