title: Delete Firebase document on bootstrap modal confirmation button
body: <p>I need some advise on how to go about editing user by document ID from the firebase database.</p>
  <p>After user clicks the icon it will bring up bootstrap modal and I need to update user information.</p>
  <p>On edit button click, it takes you to the editUser Function passing the user information to the function to be used. This function fires up a bootstrap modal to make the changes and then it should save the information back to the database.</p>
  <p>It does not applies the changes when user has updates information.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;div&gt;
        &lt;div class=&quot;container-fluid&quot;&gt;
          &lt;div class=&quot;row bg-dark&quot;&gt;
            &lt;div class=&quot;col-lg-12&quot;&gt;
              &lt;p class=&quot;text-center text-light display-4 pt-2&quot; style=&quot;font-size: 25px&quot;&gt;CRUD Application Using Vue.js&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;container&quot;&gt;
          &lt;div class=&quot;row mt-3&quot;&gt;
            &lt;div class=&quot;col-lg-6 &quot;&gt;
              &lt;h3 class=&quot;text-info mt-0 float-left&quot;&gt;Registered Users&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div class=&quot;col-lg-6&quot;&gt;
              &lt;button class=&quot;btn btn-info float-right&quot; @click=&quot;showAddModal=true&quot;&gt;
                &lt;i class=&quot;fa fa-user&quot;&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;Add New User
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;hr class=&quot;bg-info&quot;&gt;
          &lt;div v-if=&quot;errorMsg&quot; class=&quot;alert alert-danger&quot;&gt;Error Message&lt;/div&gt;
          &lt;div v-if=&quot;successMsg&quot; class=&quot;alert alert-success&quot;&gt;Success Message&lt;/div&gt;
  
          &lt;!--Display Records--&gt;
          &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-lg-12&quot;&gt;
              &lt;table class=&quot;table table-bordered table-striped&quot;&gt;
                &lt;thead&gt;
                &lt;tr class=&quot;text-center bg-info text-light&quot;&gt;
                  &lt;th&gt;ID&lt;/th&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Email&lt;/th&gt;
                  &lt;th&gt;Phone&lt;/th&gt;
                  &lt;th&gt;Edit&lt;/th&gt;
                  &lt;th&gt;Delete&lt;/th&gt;
                &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                &lt;tr v-for=&quot;(user, idx) in users&quot; :key=&quot;idx&quot; class=&quot;text-center&quot;&gt;
                  &lt;td&gt;{{ idx + 1 }}&lt;/td&gt;
                  &lt;td&gt;{{ user.name }}&lt;/td&gt;
                  &lt;td&gt;{{ user.email }}&lt;/td&gt;
                  &lt;td&gt;{{ user.phone }}&lt;/td&gt;
                  &lt;td&gt;&lt;a class=&quot;text-success&quot; href=&quot;#&quot; @click=&quot;editUser(user)&quot;&gt;&lt;i class=&quot;fa fa-edit&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;a class=&quot;text-danger&quot; href=&quot;#&quot; @click=&quot;showDeleteModal=true&quot;&gt;&lt;i class=&quot;fa fa-trash&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
                &lt;/tr&gt;
                &lt;/tbody&gt;
              &lt;/table&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;!--Add New User Model--&gt;
        &lt;div v-if=&quot;showAddModal&quot; id=&quot;add&quot; class=&quot;overlay&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;&gt;Add New User&lt;/h5&gt;
                &lt;button class=&quot;close&quot; type=&quot;button&quot; @click=&quot;showAddModal=false&quot;&gt;
                  &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-body p-4&quot;&gt;
                &lt;form action=&quot;#&quot; method=&quot;post&quot;&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                    &lt;input v-model=&quot;user.name&quot; class=&quot;form-control form-control-lg&quot; name=&quot;name&quot; placeholder=&quot;Name&quot;
                           type=&quot;text&quot;&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                    &lt;input v-model=&quot;user.email&quot; class=&quot;form-control form-control-lg&quot; name=&quot;email&quot; placeholder=&quot;Email&quot;
                           type=&quot;email&quot;&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                    &lt;input v-model=&quot;user.phone&quot; class=&quot;form-control form-control-lg&quot; name=&quot;phone&quot; placeholder=&quot;Phone&quot;
                           type=&quot;tel&quot;&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                    &lt;button class=&quot;btn btn-info btn-block btn-lg&quot;
                            @click=&quot;showAddModal=false; saveNewUser(); successMsg=true&quot;&gt;Add User
                    &lt;/button&gt;
                  &lt;/div&gt;
                &lt;/form&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;!--Edit User Model--&gt;
        &lt;div v-if=&quot;showEditModal&quot; id=&quot;edit&quot; class=&quot;overlay&quot; tabindex=&quot;-1&quot;&gt;
          &lt;div class=&quot;modal-dialog&quot; role=&quot;document&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;&gt;Update User&lt;/h5&gt;
                &lt;button aria-label=&quot;Close&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; type=&quot;button&quot; @click=&quot;showEditModal=false&quot;&gt;
                  &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-body p-4&quot;&gt;
                &lt;form action=&quot;#&quot; method=&quot;post&quot;&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                    &lt;input v-model=&quot;user.name&quot; class=&quot;form-control form-control-lg&quot; name=&quot;name&quot; placeholder=&quot;Name&quot;
                           type=&quot;text&quot;&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                    &lt;input v-model=&quot;user.email&quot; class=&quot;form-control form-control-lg&quot; name=&quot;email&quot; placeholder=&quot;Email&quot;
                           type=&quot;email&quot;&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                    &lt;input v-model=&quot;user.phone&quot; class=&quot;form-control form-control-lg&quot; name=&quot;phone&quot; placeholder=&quot;Phone&quot;
                           type=&quot;tel&quot;&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                    &lt;button class=&quot;btn btn-info btn-block btn-lg&quot; @click=&quot;showAddModal=false; updateUser()&quot;&gt;Update User
                    &lt;/button&gt;
                  &lt;/div&gt;
                &lt;/form&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!--Delete User Model--&gt;
        &lt;div v-if=&quot;showDeleteModal&quot; id=&quot;delete&quot; class=&quot;overlay&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;&gt;Delete User&lt;/h5&gt;
                &lt;button class=&quot;close&quot; type=&quot;button&quot; @click=&quot;showDeleteModal=false&quot;&gt;
                  &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-body p-4&quot;&gt;
                &lt;h4 class=&quot;text-danger&quot;&gt;Are you sure you want to delete this user?&lt;/h4&gt;
                &lt;h5&gt;You are Deleting 'Kevin'&lt;/h5&gt;
                &lt;hr&gt;
                &lt;button class=&quot;btn btn-danger btn-lg&quot; @click=&quot;showDeleteModal=false&quot;&gt;Yes&lt;/button&gt;
                &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
                &lt;button class=&quot;btn btn-success btn-lg&quot; @click=&quot;showDeleteModal=false&quot;&gt;no&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>&lt;script&gt;
  import {db} from './firebase'
  
  export default {
    name: 'App',
    data() {
      return {
        errorMsg: false,
        successMsg: false,
        showAddModal: false,
        showEditModal: false,
        showDeleteModal: false,
        users: [],
        currentUser: null,
        user: {
          userID: null,
          name: null,
          email: null,
          phone: null
        }
      }
    },
    methods: {
  
      // Displays all users stores in firebase
      displayAllUsers() {
        db.collection(&quot;patients&quot;).get().then((querySnapshot) =&gt; {
  
          querySnapshot.forEach((doc) =&gt; {
  
            this.users.push(doc.data());
          });
  
        });
      },
  
      // Creates New User with an auto generated Document
      saveNewUser() {
        db.collection(&quot;patients&quot;).add(this.user)
            .then((docRef) =&gt; {
              console.log(&quot;Document written with ID: &quot;, docRef.id);
              this.displayAllUsers();
            })
            .catch(function (error) {
              console.error(&quot;Error adding document: &quot;, error);
            });
      },
  
      // Edit User
      editUser(user) {
        this.showEditModal = true;
        this.user = user.data();
        this.currentUser = user.id;
      },
  
      // Update User
      updateUser() {
  
        db.collection(&quot;patients&quot;).doc(this.currentUser).update(this.user)
            .then(function () {
              console.log(&quot;Document successfully updated!&quot;);
            })
            .catch(function (error) {
              // The document probably doesn't exist.
              console.error(&quot;Error updating document: &quot;, error);
            });
      },
  
      // Delete User
      deleteUser(doc) {
        db.collection(&quot;patients&quot;).doc(doc).delete().then(function () {
          console.log(&quot;Document successfully deleted!&quot;);
        }).catch(function (error) {
          console.error(&quot;Error removing document: &quot;, error);
        });
      },
  
      // Reset the data from the input field to null
      reset() {
        // Object.assign(this.$data, this.$options.data.apply((this)));
      }
    },
  
    created() {
      this.displayAllUsers();
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/c1nbD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c1nbD.png" alt="enter image description here" /></a></p>