时间戳

首页 > 解决方案 > 职位发布不会删除，不断获取 id 是“未定义”

express - 职位发布不会删除，不断获取 id 是“未定义”

问题描述

我的小应用程序有问题。我目前有一个工作页面，我可以发布并获得工作。

在前端我有一个按钮可以按下Delete，但是当我按下它时，它一直给我这个错误 - DELETE FROM 'jobs' WHERE 'id' = 'undefined'。

目前使用的技术有 MySQL、sequelize、node.js、express 和 vue.js。

安慰

<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 :href="`${data.value}`" target="_blank">{{ data.value }}</a>
        </template>

        <template slot="Remove" scope="jobs">
           <b-btn variant="danger" @click="deleteJob(jobs.ID)"> Delete </b-btn>
        </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'

export default {
  components: {
    AddJob
  },
    data () {
        return {
            fields: [
              { Key: 'ID', label: 'Job 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 link', sortable: false },
              { key: 'job_postingOn', label: 'Posted on', sortable: true, tdClass: 'text-right' },
              { key: 'job_postingBy', label: 'Posted by', sortable: true },
              { key: 'Remove', sortable: true }
            ],
            filter: null,
            jobs: [
              {  
                  ID: '',           
                  job_title: '',
                  job_name: '',
                  job_location: '',
                  job_postingURL: '',
                  job_postingOn: '',
                  job_postingBy: ''
              },
          ],
        }
    },
    // this method is to get the data from database
   async created () {
    try {
      this.jobs = await JobService.getJobs();
    } catch(err) {
      this.error = err.message;
    }
  },
  methods: {
      deleteJob (ID) {
        axios.delete(`http://localhost:5000/api/jobs/${this.ID}`)
          .then((res) => {
            this.ID = ''
            this.job_title = ''
            this.job_name = ''
            this.job_location = ''
            this.job_postingURL =''
            this.job_postingOn = ''
            this.job_postingBy = ''
            console.log(res)
          })
          .catch((err) => {
            console.log(err)
          })
      }
  }
}

</script>

标签： expressvue.jsvuejs2sequelize.jsvue-component

解决方案

由于您jobs喜欢一个不能jobs用作slot-scope值的数据对象属性，请尝试类似的方法row，在这种情况下，row对象包含一些属性，例如item包含有关此行​​中显示的当前项目的数据，因此您应该这样做：

<template slot="Remove" slot-scope="row">
    <b-btn variant="danger" @click="deleteJob(row.item.ID)"> Delete </b-btn>
</template>

并在您的方法中：

deleteJob (ID) {
    axios.delete('http://localhost:5000/api/jobs/'+ID)
      .then((res) => {...

推荐阅读