在VUE项目中使用axios传递数据丢失,请问是哪里出了问题

Question

1. 首先当我点击删除时,会触发数据传递

为了做出判断我在页面和点击事件出console了
如上图所示,***网络请求中id并没有被赋值***,而是显示为axios中定义的模样 $(ids)
请问是哪里出了问题

---

template中代码如下

<li v-for="book in books">
    <img :src="book.bookCover">
    <div class="bookInfos">
    <h4>{{book.bookName}}</h4>
    <p>{{book.bookInfo}}</p>
    <b>{{book.bookPrice}}</b>
    <button @click="remove(book.bookId)">删除</button>{{book.bookId}}
</div>

在上图中显示调用正常

---

script中代码如下

export default {
  data() {
    return {
      books: []
    }
  },
  created() {
    this.getData();
  },
  components: {
    Mheader
  },
  methods : {
    async remove(id) {
      console.log(id);
      await removeBook(id);
    },
    async getData() {
      this.books = await getBooks();
    }
  }
}

在methods中我打印了获取的数据,如上图所示,获取的数值正确

2. 贴一下axios部分的代码

import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:3000';
// 添加默认接口

// 添加默认的请求路径
// 拦截器
axios.interceptors.response.use((res)=>{
  return res.data;
};

// 删除某一本图书
export let removeBook = (ids) => {
  return axios.delete('/book?id=${ids}');
};

3. 最后贴一下服务server.js的代码

if (pathname === '/book') {
    let id = parseInt(query.id);
    switch (req.method) {
       case 'GET':
       if (id) { // 查询一个

       } else { // 查询所有
        read(function(books) {
          res.setHeader('Content-Type', 'application/json;charset=utf8');
          res.end(JSON.stringify(books.reverse()));
        });
       }
        break;
       case 'POST':
        break;
       case 'PUT':
        break;
       case 'DELETE':
       console.log(id)
        break;
    }
    return;
  }

在DELETE中我console了结果,发现果然没有传递数据进来...

Answer 1

 return axios.delete(`/book?id=${ids}`);

引号写错了，这是es6的模板字符串，不然就用

 return axios.delete('/book?id=' + ids);