Bootstrap-vue 模态：始终删除最后一个 ID

Question

我的应用程序中有一个作业页面，我每次尝试删除作业时都尝试使用其 ID 删除作业，它正在删除列表中的最后一个 id 它没有删除此处选择的 id我正在使用 REST API 执行删除操作我还在删除时通过将 ID 打印到控制台来检查 ID，即使我单击了列表中的第一个 ID，它在删除时显示最后一个 ID。

这是职位详情页面

<template>
 <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" variant="danger">Delete</b-button>
              <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(row.item.ID)">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>
        </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,
        }
    },
    // 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) => {
            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>

Answer 1

您正在生成多个模式，作业中的每个项目一个，但具有相同的参考。

当您打开模式确认删除时，使用最后一项，因此您批准删除最后一项。

您只能在循环之外创建一个模式，并将 ID 用作参数。当单击删除按钮设置 ID 时，您应该完成。

以下是更新后的代码。

OP 代码的变化：

• 将b-modal移到模板顶部
• 添加ID作为组件数据，它将用于删除按钮和确认模式之间的通信
• 更改了showModal 的签名以接收您要删除的作业的 ID
• 更改了 deleteJob 的签名以使用组件实例中的 ID

---

<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>