鍍金池/ 問答/HTML/ 在VUE項(xiàng)目中使用axios傳遞數(shù)據(jù)丟失,請問是哪里出了問題

在VUE項(xiàng)目中使用axios傳遞數(shù)據(jù)丟失,請問是哪里出了問題

clipboard.png

1. 首先當(dāng)我點(diǎn)擊刪除時,會觸發(fā)數(shù)據(jù)傳遞

為了做出判斷我在頁面和點(diǎn)擊事件出console了
如上圖所示,***網(wǎng)絡(luò)請求中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>

在上圖中顯示調(diào)用正常


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中我打印了獲取的數(shù)據(jù),如上圖所示,獲取的數(shù)值正確

2. 貼一下axios部分的代碼

import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:3000';
// 添加默認(rèn)接口

// 添加默認(rèn)的請求路徑
// 攔截器
axios.interceptors.response.use((res)=>{
  return res.data;
};

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

3. 最后貼一下服務(wù)server.js的代碼

clipboard.png

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了結(jié)果,發(fā)現(xiàn)果然沒有傳遞數(shù)據(jù)進(jìn)來...

回答
編輯回答
大濕胸
 return axios.delete(`/book?id=${ids}`);

引號寫錯了,這是es6的模板字符串,不然就用

 return axios.delete('/book?id=' + ids);
2017年4月26日 14:34