title: Im confuse with axios in seperate service file
body: <p>Im now is learn vue.js, and i want to consume API from my backend (using spring). </p>
  
  <p>This is <strong>my service.js</strong></p>
  
  <pre><code>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();
  </code></pre>
  
  <p>this is my component</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="container"&gt;
      &lt;h3&gt;All Courses&lt;/h3&gt;
      &lt;div v-if="message" class="alert alert-success"&gt;
        {{message}}
      &lt;/div&gt;
      &lt;div class="container"&gt;
        &lt;table class="table"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;Id&lt;/th&gt;
              &lt;th&gt;Description&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr v-for="loker in loker" v-bind:key="loker.idLowongan"&gt;
              &lt;td&gt;{{loker.idLowongan}}&lt;/td&gt;
              &lt;td&gt;{{loker.deskripsi}}&lt;/td&gt;
              &lt;td&gt;
                &lt;button class="btn btn-warning" v-on:click="deleteLokerClicked(loker.idLowongan)"&gt;
                  Hapus
                &lt;/button&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import LowonganKerjaService from '../../service/LowonganKerjaService';
  export default {
      name : "LokerList",
      data() {
          return{
              loker : []
          };
      },
  
      methods:{
          refreshLoker(){
              LowonganKerjaService.retrieveAllLoker()
              .then(response =&gt; {
                  this.loker = response.data;
              });
          },
          deleteLokerClicked(idLowongan){
            LowonganKerjaService.deleteLoker(idLowongan).then(()=&gt; {
              this.message = 'Loker dengan ${idLowongan} berhasil dihapus';
              this.refreshLoker();
            });
          }
  
      },
      created(){
          this.refreshLoker();
      }
  };
  &lt;/script&gt;
  
  &lt;style&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>and i got this error </p>
  
  <blockquote>
    <p>Failed to compile.</p>
    
    <p>./src/service/LowonganKerjaService.js Module Error (from
    ./node_modules/eslint-loader/index.js):</p>
    
    <p>D:\Kuliah\TERM
    6\Propensi\Implementasi\frontend-sixacti\src\service\LowonganKerjaService.js
    10:17  error  'idLowongan' is defined but never used  no-unused-vars</p>
    
    <p>✖ 1 problem (1 error, 0 warnings)</p>
  </blockquote>
  
  <p>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?</p>
  
  <p>Please somebody help me to give the reason </p>
  
  <p>Thanks</p>
  
  <p>**sorry for my bad language</p>