title: Close a bootstrap modal 5 after asynchronously submitting a form with vue js
body: <p>I am trying to hide a modal after submitting a form. I am using <code>bootstrap 5</code>, <code>vue 2</code> and <code>django 3.2</code>. I am a beginner in <code>javascript</code> and <code>vue</code>.
  I can asynchronously submit the form with <code>fetch</code> and clear the fields, but I can't close the modal.</p>
  <p>I report part of my code (<code>bootstrap</code> and <code>vue</code> only) which unfortunately does not provide a minimum reproducible example, but I hope it is sufficient.</p>
  <p>The <code>html</code> template is:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div style=&quot;margin-right: 230px&quot; id=&quot;app&quot;&gt;
          
      &lt;h4 style=&quot;text-align:left;float:left;&quot;&gt;User Managment&lt;/h4&gt;
      &lt;a 
          href=&quot;#&quot; 
          data-bs-toggle=&quot;modal&quot; 
          data-bs-target=&quot;#add_userModal&quot;
          class=&quot;btn btn-sm btn-outline-primary px-4&quot; 
          style=&quot;text-align:right; float:right;&quot;&gt;
              Add
      &lt;/a&gt;
      &lt;hr style=&quot;clear:both; border-top: 1px solid grey;&quot;/&gt;
  
      &lt;table class=&quot;table&quot; id=&quot;userTable&quot;&gt;
          &lt;thead&gt;
          &lt;tr&gt;
              &lt;th class=&quot;col-md-4&quot;&gt;First name&lt;/th&gt;
              &lt;th class=&quot;col-md-8&quot;&gt;Last name&lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr v-for=&quot;userdb in usersdb&quot;&gt;
                  &lt;td&gt;&lt;a href=&quot;#&quot;&gt;{% verbatim %}{{ userdb.first_name }}{% endverbatim %}&lt;/a&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;a href=&quot;#&quot;&gt;{% verbatim %}{{ userdb.last_name }}{% endverbatim %}&lt;/a&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  
      &lt;div class=&quot;modal fade&quot; id=&quot;add_userModal&quot; tabindex=&quot;-1&quot; aria-labelledby=&quot;add_userModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
        &lt;div class=&quot;modal-dialog&quot;&gt;
          &lt;div class=&quot;modal-content&quot;&gt;
            &lt;div class=&quot;modal-header&quot;&gt;
              &lt;h5 class=&quot;modal-title&quot; id=&quot;staticBackdropLabel&quot;&gt;Utente&lt;/h5&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
            &lt;/div&gt;
            &lt;form @submit.prevent=&quot;createUserdb&quot;&gt;
              &lt;div class=&quot;modal-body&quot;&gt;
  
                &lt;div class=&quot;form-group mb-3&quot;&gt;
                  &lt;label&gt;First name*&lt;/label&gt;
                  &lt;input
                    type=&quot;text&quot;
                    class=&quot;form-control&quot;
                    id=&quot;first_name&quot;
                    v-model=&quot;userdb.first_name&quot;
                    required&gt;
                &lt;/div&gt;
  
                &lt;div class=&quot;form-group mb-3&quot;&gt;
                  &lt;label&gt;Last name*&lt;/label&gt;
                  &lt;input
                    type=&quot;text&quot;
                    class=&quot;form-control&quot;
                    id=&quot;last_name&quot;
                    v-model=&quot;userdb.last_name&quot;
                    required&gt;
                &lt;/div&gt;
  
              &lt;/div&gt;
              &lt;div class=&quot;modal-footer&quot;&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-outline-secondary&quot; data-bs-dismiss=&quot;modal&quot;&gt;Cancel&lt;/button&gt;
                &lt;button type=&quot;submit&quot; class=&quot;btn btn-sm btn-outline-primary&quot;&gt;Add&lt;/button&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The javascript code is</p>
  <pre class="lang-javascript prettyprint-override"><code>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();
      }
  })
  </code></pre>
  <p>I made many attempts to add code in <code>createUserdb</code>, but without success. For example</p>
  <pre class="lang-javascript prettyprint-override"><code>document.getElementById(&quot;add_userModal&quot;).hide();
  </code></pre>
  <p>How can I hide the modal after submitting the form?</p>
  <p>Any help is truly appreciated</p>