Вы создаете несколько модалов, по одному для каждого элемента в заданиях, но с тем же ссылочным номером.
Когда вы открываете модал, чтобы подтвердить удаление, используется последний, следовательно, вы одобряете удаление последнегоitem.
Вы можете создать только один модал вне цикла и использовать ID в качестве параметра.При нажатии кнопки «Удалить» установите идентификатор, и все готово.
Ниже приведен обновленный код.
Изменения по сравнению с кодом OP:
- перемещено
b-modal вВ верхней части шаблона - добавлен
ID в качестве данных компонента, он будет использоваться для обмена данными между кнопками удаления и модальным подтверждением - измененная подпись
showModal для получения идентификаторазадание, которое вы хотите удалить - изменило подпись
deleteJob для использования идентификатора из экземпляра компонента
<template>
<!--moved modal at the top-->
<b-modal ref="myModalRef" hide-footer hide-header>
<div>
<h3 class="font-weight-light">Do you want to delete this job?</h3>
</div>
<div class="float-right pt-4">
<b-btn type="submit" variant="outline-danger" @click="deleteJob">Delete</b-btn>
</div>
<div class="float-right pr-2 pt-4">
<b-btn type="submit" variant="outline-danger" style="padding-left: 10px" @click="hideModal">Cancel</b-btn>
</div>
</b-modal>
<div>
<h2 class="mb-4 font-weight-light">Job Postings</h2>
<div class="d-flex align-items-center justify-content-between">
<b-input-group class="w-30">
<b-form-input v-model="filter" placeholder="Type to Search" />
<b-input-group-append>
<b-btn :disabled="!filter" @click="filter = ''">Clear</b-btn>
</b-input-group-append>
</b-input-group>
<b-button variant="primary" class="d-flex align-items-center" v-b-modal.addJob><i class="material-icons mr-1"></i> Add Job</b-button>
</div>
<b-table responsive hover :items="jobs" :fields="fields" :filter="filter" no-sort-reset sort-by="postedOn" :sort-desc="true" class="mt-3 f6">
<template slot="job_postingURL" slot-scope="data">
<a class ="pink darken-3" :href="`${data.value}`" target="_blank">{{ data.value }}</a>
</template>
<template slot="modify" slot-scope="row">
<div slot="modal-footer" class="w-100">
<div class="" >
<div>
<b-button @click="showModal(row.item.ID)" variant="danger">Delete</b-button>
</div>
</div>
</div>
</template>
</b-table>
<add-job></add-job>
</div>
</template>
<script>
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,
ID: 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: {
// added id param to showModal
showModal(id) {
this.ID = id
this.$refs.myModalRef.show()
},
focusMyElement (e) {
this.$refs.focusThis.focus()
},
hideModal () {
this.$root.$emit('bv::hide::modal','myModal')
this.$refs.myModalRef.hide()
},
// delete job relies on ID being set before the call
deleteJob () {
axios.delete(`http://localhost:5000/api/jobs/${this.ID}`)
.then((res) => {
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) => {
console.log(err)
})
},
onCancel () {
this.value = 'Cancle'
}
}
}
</script>