Javascript 使用vue js异步提交表单后关闭引导模式5

我试图在提交表单后隐藏模态。我使用的是

bootstrap5

、

vue 2

和

django 3.2

。我是

javascript

和

vue

的初学者。 我可以使用

fetch

异步提交表单并清除字段，但无法关闭模式

我报告了我的部分代码（

bootstrap

和

vue

），不幸的是，这些代码没有提供一个最小的可复制示例，但我希望它足够了

html

模板是：

用户管理

名字
姓
中尉
名字*
姓*
取消
添加

javascript代码是

var-app=新的Vue({
el:“#应用程序”，
数据：{
csrf:null，
用户数据库：{
名字：''，
姓氏：“”，
全名：'}，
usersdb:[]
}, 
方法：{
异步发送请求（url、方法、数据）{
var myHeaders=新标题({
“内容类型”：“应用程序/json”，
“X-request-With'：“XMLHttpRequest”
})
如果（方法！='get'）{
myHeaders.set（'X-CSRFToken'，等待这个.getCsrfToken（））
};
var response=等待获取（url{
方法:方法,，
标题：myHeaders，
正文：数据
});
返回响应
},
异步getCsrfToken（）{
如果（this.csrf==null）{
var response=等待此.sendRequest（mainUrl+'csrf'，'get'）
var data=await response.json（）；
this.csrf=data.csrf_令牌；
};
返回此.csrf；
}, 
异步getUserdb（）{
var response=wait this.sendRequest（mainUrl'get'）；
this.usersdb=await response.json（）；
}, 
异步createUserdb（）{
等待此消息。getUserdb（）；
等待this.sendRequest（mainUrl'post'，JSON.stringify（this.userdb））；
this.userdb.first_name=''；
this.userdb.last_name=''；
等待此消息。getUserdb（）；
}
},
异步创建（）{
等待此消息。getUserdb（）；
}
})

我多次尝试在

createUserdb

中添加代码，但都没有成功。比如说

document.getElementById（“add_userModal”）.hide（）；

提交表单后如何隐藏模式

---

非常感谢您的帮助

您需要完全管理Vue应用程序中的引导模式实例

1-首先，为模式添加一个新的数据变量

data: {
        csrf: null,
        userdb: {
            first_name: '', 
            last_name: '', 
            full_name: ''}, 
        usersdb: [],
        myModal: null
    }, 

2-和一个新方法（即：

showmodel（）

）来获取Bootstrap.model的实例并显示它

    showModal(){
        this.myModal = new bootstrap.Modal(document.getElementById('add_userModal'), {})
        this.myModal.show()
    },

3-将新方法绑定到

@单击
处理程序以显示模式（而不是使用
数据bs
属性）

这太棒了！它工作得很好。非常感谢您的解答和解释！
   <a 
        @click="showModal()"
        class="btn btn-sm btn-outline-primary px-4" 
        style="text-align:right; float:right;">
            Add
   </a>

    async createUserdb() {
          await this.getUserdb();
          await this.sendRequest(mainUrl, 'post', JSON.stringify(this.userdb));
          this.userdb.first_name = '';
          this.userdb.last_name = '';
          this.myModal.hide()
    }