用vue js异步提交表单后关闭一个bootstrap模态5

Question

我想在提交表单后隐藏模式。我正在使用 bootstrap 5、vue 2 和 django 3.2。我是 javascript 和 vue 的初学者。我可以使用 fetch 异步提交表单并清除字段，但我无法关闭模式。

我报告了我的部分代码（仅 bootstrap 和 vue），遗憾的是它没有提供最低限度的可重现示例，但我希望它足够了。

html 模板是：

<div style="margin-right: 230px" id="app">
        
    <h4 style="text-align:left;float:left;">User Managment</h4>
    <a 
        href="#" 
        data-bs-toggle="modal" 
        data-bs-target="#add_userModal"
        class="btn btn-sm btn-outline-primary px-4" 
        style="text-align:right; float:right;">
            Add
    </a>
    <hr style="clear:both; border-top: 1px solid grey;"/>

    <table class="table" id="userTable">
        <thead>
        <tr>
            <th class="col-md-4">First name</th>
            <th class="col-md-8">Last name</th>
        </tr>
        </thead>
        <tbody>
            <tr v-for="userdb in usersdb">
                <td><a href="#">{% verbatim %}{{ userdb.first_name }}{% endverbatim %}</a></td>
                <td><a href="#">{% verbatim %}{{ userdb.last_name }}{% endverbatim %}</a></td>
            </tr>
        </tbody>
    </table>

    <div class="modal fade" id="add_userModal" tabindex="-1" aria-labelledby="add_userModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="staticBackdropLabel">Utente</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <form @submit.prevent="createUserdb">
            <div class="modal-body">

              <div class="form-group mb-3">
                <label>First name*</label>
                <input
                  type="text"
                  class="form-control"
                  id="first_name"
                  v-model="userdb.first_name"
                  required>
              </div>

              <div class="form-group mb-3">
                <label>Last name*</label>
                <input
                  type="text"
                  class="form-control"
                  id="last_name"
                  v-model="userdb.last_name"
                  required>
              </div>

            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
              <button type="submit" class="btn btn-sm btn-outline-primary">Add</button>
            </div>
          </form>
        </div>
      </div>
    </div>
</div>

javascript代码是

var app = new Vue({
    el: '#app', 
    data: {
        csrf: null,
        userdb: {
            first_name: '', 
            last_name: '', 
            full_name: ''}, 
        usersdb: []
    }, 

    methods: {
        async sendRequest(url, method, data) {
            var myHeaders = new Headers({
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            })

            if (method !== 'get') {
                myHeaders.set('X-CSRFToken', await this.getCsrfToken())
            };

            var response = await fetch(url, {
                method: method, 
                headers: myHeaders, 
                body: data
            });

            return response
        },

        async getCsrfToken() {
            if (this.csrf === null) {
                var response = await this.sendRequest(mainUrl + 'csrf', 'get')
                var data = await response.json();
                this.csrf = data.csrf_token;
            };
            return this.csrf;
        }, 

        async getUserdb() {
            var response = await this.sendRequest(mainUrl, 'get'); 
            this.usersdb = await response.json();
        }, 

        async createUserdb() {
            await this.getUserdb();

            await this.sendRequest(mainUrl, 'post', JSON.stringify(this.userdb));
            
            this.userdb.first_name = '';
            this.userdb.last_name = '';
            await this.getUserdb();
        }
    },

    async created() {
        await this.getUserdb();
    }
})

我多次尝试在 createUserdb 中添加代码，但没有成功。例如

document.getElementById("add_userModal").hide();

如何在提交表单后隐藏模式？

非常感谢任何帮助

Answer 1

您需要完全管理 Vue 应用程序中的 Bootstrap 模态实例...

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

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

2 - 还有一个新方法（即：showModal()）获取 Bootstrap.modal 的实例并显示它...

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

3 - 将新方法绑定到 @click 处理程序以显示模式（而不是使用 data-bs 属性）...

   <a 
        @click="showModal()"
        class="btn btn-sm btn-outline-primary px-4" 
        style="text-align:right; float:right;">
            Add
   </a>

4 - 最后，异步处理后调用hide()方法...

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

Demo

用vue js异步提交表单后关闭一个bootstrap模态5

Close a bootstrap modal 5 after asynchronously submitting a form with vue js

html

javascript

vue.js

bootstrap-5