职位发布不会删除,不断获取ID是“未定义”

时间:2018-11-14 19:35:02

标签: express vue.js sequelize.js

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

在前端,我有一个按钮可以按Delete,但是在执行此操作时,总是出现此错误-DELETE FROM 'jobs' WHERE 'id' = 'undefined'

当前,在MySQL,sequelize,node.js,express和vue.js中使用的技术。

Console

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

1 个答案:

答案 0 :(得分:1)

由于您拥有jobs之类的数据对象属性,因此无法使用jobs作为slot-scope的值,因此请尝试类似row的情况,在这种情况下,请尝试{{1} }对象包含一些属性,例如row,其中包含有关此行​​中显示的当前项目的数据,因此您应该执行以下操作:

item

以及您的方法中:

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