title: Bootstrap-vue modal: Always Deleting the Last ID
body: <p>I have a jobs page in my app where I am trying to delete the job by using its ID every time I try to delete the Job it is deleting the last id in the list it is not deleting the id which is selected here I am using REST API to perform the delete operation I also checked the ID when it is deleting by printing it to console even though I clicked the first Id in my list it is displaying the last id while it is deleting.</p>
  
  <p>this is the job details page</p>
  
  <pre><code>&lt;template&gt;
   &lt;div&gt;
      &lt;h2 class="mb-4 font-weight-light"&gt;Job Postings&lt;/h2&gt;
      &lt;div class="d-flex align-items-center justify-content-between"&gt;
        &lt;b-input-group class="w-30"&gt;
          &lt;b-form-input v-model="filter" placeholder="Type to Search" /&gt;
          &lt;b-input-group-append&gt;
            &lt;b-btn :disabled="!filter" @click="filter = ''"&gt;Clear&lt;/b-btn&gt;
          &lt;/b-input-group-append&gt;
        &lt;/b-input-group&gt;
        &lt;b-button variant="primary" class="d-flex align-items-center" v-b-modal.addJob&gt;&lt;i class="material-icons mr-1"&gt;&lt;/i&gt; Add Job&lt;/b-button&gt;
      &lt;/div&gt;
      &lt;b-table responsive hover :items="jobs" :fields="fields" :filter="filter" no-sort-reset sort-by="postedOn" :sort-desc="true" class="mt-3 f6"&gt;
          &lt;template slot="job_postingURL" slot-scope="data"&gt;
            &lt;a class ="pink darken-3" :href="`${data.value}`" target="_blank"&gt;{{ data.value }}&lt;/a&gt;   
          &lt;/template&gt;
         &lt;template slot="modify" slot-scope="row"&gt;
         &lt;div slot="modal-footer" class="w-100"&gt;
          &lt;div class="" &gt; 
              &lt;div&gt;
                &lt;b-button @click="showModal" variant="danger"&gt;Delete&lt;/b-button&gt;
                &lt;b-modal ref="myModalRef" hide-footer hide-header&gt;
                &lt;div&gt;
                    &lt;h3 class="font-weight-light"&gt;Do you want to delete this job?&lt;/h3&gt;
                &lt;/div&gt;
                &lt;div class="float-right pt-4"&gt;
                  &lt;b-btn type="submit" variant="outline-danger"  @click="deleteJob(row.item.ID)"&gt;Delete&lt;/b-btn&gt; 
               &lt;/div&gt;
               &lt;div class="float-right pr-2 pt-4"&gt;
                 &lt;b-btn  type="submit" variant="outline-danger"  style="padding-left: 10px" @click="hideModal"&gt;Cancel&lt;/b-btn&gt;
               &lt;/div&gt;
                &lt;/b-modal&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
         &lt;/template&gt;
      &lt;/b-table&gt;
      &lt;add-job&gt;&lt;/add-job&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import AddJob from '@/components/jobs/AddJob'
  import JobService from '../../services/JobService'
  import axios from 'axios'
  import { mapGetters } from 'vuex'
  import { orderBy } from 'lodash'
  export default {
    components: {
      AddJob
    },
      data () {
  
          return {
              fields: [
                { Key: 'ID', label: 'ID', sortable: false},
                { key: 'job_title', label: 'Job title', sortable: true },
                { key: 'job_name', label: 'Company name', sortable: true },
                { key: 'job_location', label: 'Location', sortable: true },
                { key: 'job_postingURL', label: 'Job posting URL', sortable: false },
                { key: 'job_postingOn', label: 'Posted on', sortable: true},
                { key: 'job_postingBy', label: 'Posted by', sortable: true },
                { key: 'modify', sortable: true}
              ],
              filter: null,
              jobs: [
                {  
                    ID: this.ID,           
                    job_title: '',
                    job_name: '',
                    job_location: '',
                    job_postingURL: '',
                    job_postingOn: '',
                    job_postingBy: ''
                },
            ],
            active: false,
        value: null,
          }
      },
      // this method is to get the data from database
     async created () {
      try {
        this.jobs = await JobService.getJobs();
      } catch(err) {
        this.error = err.message;
      }
    },
    computed: {
          ...mapGetters(['firstName', 'lastName'])
      }, 
    methods: {
      showModal() {
          this.$refs.myModalRef.show()
        },
       focusMyElement (e) {
        this.$refs.focusThis.focus()
      },
  
      hideModal () {
        this.$root.$emit('bv::hide::modal','myModal')
        this.$refs.myModalRef.hide()
      },
        deleteJob (ID) {
          axios.delete(`http://localhost:5000/api/jobs/${ID}`)
            .then((res) =&gt; {
              this.job_title = ''
              this.job_name = ''
              this.job_location = ''
              this.job_postingURL = ''
              this.job_postingOn = ''
              this.job_postingBy = ''
              this.getJobs()
            console.log(res)
            })
            .catch((err) =&gt; {
              console.log(err)
            })
        },
        onCancel () {
          this.value = 'Cancle'
        }
    }
  }
  &lt;/script&gt;
  </code></pre>