引导模式不显示 vue 3

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()
            },
        }
    }

当我可以使用帮助功能打开模态时，模态无法打开，但出现错误 concole:

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

如果我在 $root 上使用 Emitting 事件，window 也不会正常打开。

同样的错误：

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

如果我使用上面的示例class“modal-backdrop fade show”不删除并且没有项目可用

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

Answer 1

在模式中，您设置了 id，而不是 ref。尝试改变它。

Answer 2

您可以使用 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;
        }
    }
}

编辑：或具有切换功能

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

引导模式不显示 vue 3

bootsrap modal not showing vue 3

vue.js

vuejs3

bootstrap5-modal