Im confuse with axios in seperate service file - spring-boot

Question

Im now is learn vue.js, and i want to consume API from my backend (using spring).
This is my service.js
import axios from "axios";
class LowonganKerjaService {
retrieveAllLoker() {
return axios.get('http://localhost:8081/api/listLoker');
}
deleteLoker(idLowongan){
return axios.delete('http://localhost:8081/api/${idLowongan}');
}
}
export default new LowonganKerjaService();
this is my component
<template>
<div class="container">
<h3>All Courses</h3>
<div v-if="message" class="alert alert-success">
{{message}}
</div>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr v-for="loker in loker" v-bind:key="loker.idLowongan">
<td>{{loker.idLowongan}}</td>
<td>{{loker.deskripsi}}</td>
<td>
<button class="btn btn-warning" v-on:click="deleteLokerClicked(loker.idLowongan)">
Hapus
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
import LowonganKerjaService from '../../service/LowonganKerjaService';
export default {
name : "LokerList",
data() {
return{
loker : []
};
},
methods:{
refreshLoker(){
LowonganKerjaService.retrieveAllLoker()
.then(response => {
this.loker = response.data;
});
},
deleteLokerClicked(idLowongan){
LowonganKerjaService.deleteLoker(idLowongan).then(()=> {
this.message = 'Loker dengan ${idLowongan} berhasil dihapus';
this.refreshLoker();
});
}
},
created(){
this.refreshLoker();
}
};
</script>
<style>
</style>
and i got this error
Failed to compile.
./src/service/LowonganKerjaService.js Module Error (from
./node_modules/eslint-loader/index.js):
D:\Kuliah\TERM
6\Propensi\Implementasi\frontend-sixacti\src\service\LowonganKerjaService.js
10:17 error 'idLowongan' is defined but never used no-unused-vars
✖ 1 problem (1 error, 0 warnings)
Oh and i've got error too when i use ${} in those service.
Why that error state that my 'idLowongan' is never used? is it because i wrong my syntaks or what?
Please somebody help me to give the reason
Thanks
**sorry for my bad language

Answer 1

From the looks of your code it looks like you're using a single quote (') and not a backtick (`) when you're attempting to use JS template literal. You can see an example of that in the MSDN documentation. Since it is a string in your example and not a template literal the variable in the function's argument is never used.
Try changing the code in your service's delete method to be this:
return axios.delete(`http://localhost:8081/api/${idLowongan}`)