---
# System prepended metadata

title: "\U0001F3C5Day19 - todolist 實作篇 - 刪除資料功能"
tags: [2024 Vue 前端新手營 - Composition API]

---

# 🏅Day19 - todolist 實作篇 - 刪除資料功能

## 刪除資料

刪除資料資料時，我們會使用 `DELETE` 的方式，並且後方會帶上要刪除產品資料的 ID

```js
const url = "example/api"

axios.delete(`${url}/${ 要刪除產品的id }`, {
    headers: {
      Authorization: token.value,
    },
  })
  .then(response => {
    console.log('資料刪除成功:', response.data);
  })
  .catch(error => {
    console.error('刪除資料時發生錯誤:', error);
  });
```

題目
---
操作 [這個模板](https://codepen.io/yen-kg/pen/MWMbgXd)，執行以下要求（只能操作 script 的部分）：
* 完成刪除資料功能，並且能夠取得全部資料呈現在畫面之上。

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：
const deleteTodo = async(id) => {
  const response = await axios.delete(`${api}/todos/${id}`, {
    headers: {
      Authorization: token.value,
    },
  });
  getTodos();
}
-->

回報區
---

|     Discord      |                           CodePen / 答案                            |
|:----------------:|:-------------------------------------------------------------------:|
| Michael |[CodePen](https://codepen.io/RenHuang-Huang/pen/LYKroRB) |
| 好了啦 |[CodePen](https://codepen.io/j-z-the-flexboxer/pen/ExBEdYe) |
| Tough life | [CodePen](https://codepen.io/hakuei0115/pen/vYqRVWL) |
| Aden | [CodePen](https://codepen.io/Osases/pen/vYqRQBg) |
| rjjq | [CodePen](https://codepen.io/rjjq/pen/NWZYVKb) |
| KK | [CodePen](https://reurl.cc/7djLn5) |
| Hilda | [CodePen](https://codepen.io/vwquikad-the-vuer/pen/VwJXEmZ) |
| SKey | [CodePen](https://codepen.io/Dale-Chien/pen/poXVQKB) |
| 蛋黃 |[CodePen](https://codepen.io/yiyun12o9/pen/qBzYwrP) |
| ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/QWXxxRM) |
| World |[Codepen](https://codepen.io/HexschoolVuePujols/pen/KKjejBG) |
| mu mu |[Codepen](https://codepen.io/ishuki916/pen/QWXBGpN) |
| Mars |[Codepen](https://codepen.io/MarsKuo/pen/OJewZWZ) |
| Kevin Wei |[Codepen](https://codepen.io/kevin21305991/pen/PorBaRY) |
| anthy7154 |[Codepen](https://codepen.io/hnhmgzbw-the-sans/pen/abgagdK) |
| zhen |[Codepen](https://codepen.io/yunnnz/pen/yLdRbmV) |
| Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/yLdRREY) |
| duchi | [CodePen](https://codepen.io/sqaz0502/pen/MWMZbgZ) |
| Ching | [CodePen](https://codepen.io/huangching/pen/XWLORBr) |
| Eden |[Codepen](https://codepen.io/iseden/pen/WNVRYvN)|
| Triple | [CodePen](https://codepen.io/riku30/pen/QWeKQZN) |
<!-- 

 | user | [CodePen]() |

-->