# 🏅Day21 - todolist 實作篇 ：編輯資料功能
編輯資料的操作行為可以分為 3 個部分：
1. 編輯的畫面操作：點擊按鈕，切換 input 編輯框顯示
2. 編輯的函式說明
3. 編輯資料 API 使用 PUT
以下為此 3 部分的程式碼邏輯與說明：
## 1. 編輯的畫面操作：點擊按鈕，切換 input 編輯框顯示
首先拿到資料的時候，會將所有的資料加上 `isEditing`：
```
todos.value = response.data.data.map(todo => ({
...todo,
isEditing: false,
}));
```
這個 ```isEditiong``` 是用來判斷是否有點擊編輯按鈕。
所以當點擊編輯按鈕時，會透過 ```isEditiong``` 等於 ```true``` 的方式來展開 HTML 第 32 行
```
<template v-if="item.isEditing">
{{ item.content }} | 更新值：{{ editTodo[item.id] }}
<input @change="onEditInputChange($event, item.id)" type="text" />
<button @click="saveTodo(item)" class="btn btn-primary ms-1">保存</button>
<button @click="cancelEdit(index)" class="btn btn-danger ms-1">取消編輯</button>
</template>
```
---
## 2. 編輯的函式說明
點擊編輯按鈕展開之後，主要會三個 function，分別是：
```onEditInputChange```、```saveTodo(item)```、```cancelEdit(index)```
* ### onEditInputChange：監聽 input 發生變化時，會將更新值存放在暫存區
```
const onEditInputChange = (event, id) => {
editTodo.value = {
...editTodo.value,
[id]: event.target.value,
};
};
```
值得注意的是這裡多加了一個 id 的屬性，原因是我們會利用陣列 + id 索引的方式來呈現該筆資料
```
更新值：{{ editTodo[item.id] }}
```
所以一定要加上 id，才能正確地呈現每筆資料。
* ### saveTodo：按下保存之後會把資料傳送到後端去。
* ### cancelEdit：關閉編輯模式。
## 編輯資料 API 使用 PUT
編輯資料會使用到 `PUT` 的方式，我們會先帶入產品的 id，
接著在後方 data 帶入需要更改的資料內容
```js
const url = "example/api"
axios.put(`${url}/${ 要更新產品的id }`, data, {
headers: {
Authorization: token.value,
},
})
.then(response => {
console.log('資料更新成功:', response.data);
})
.catch(error => {
console.error('更新資料時發生錯誤:', error);
});
```
題目
---
了解編輯的資料處理邏輯後，請操作 [這個模板](https://codepen.io/yen-kg/pen/zYVozwK)，執行以下要求（只能操作 script 的部分）：
* 請完成 saveTodo 編輯資料的功能，並且當按下保存時，會關閉編輯模式，然後更新畫面。
## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
<!-- 解答：
const saveTodo = async (item) => {
item.isEditing = false;
const updatedContent = editTodo.value[item.id] || item.content;
try {
await axios.put(`${api}/todos/${item.id}`, { content: updatedContent }, {
headers: {
Authorization: token.value,
},
});
item.content = updatedContent;
} catch (error) {
console.error("保存資料失敗", error);
}
};
-->
回報區
---
| Discord | CodePen / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| thchen2002 | [CodePen](https://codepen.io/thchen2002/pen/MYaqPEv) |
| 叮咚 | [CodePen](https://codepen.io/pinchieh-lin/pen/VYvGEBJ) |
| William Hsieh | [CodePen](https://codepen.io/lsaimqxa-the-vuer/pen/zxvJMzQ) |
| Clarence | [CodePen](https://codepen.io/Clarence-Lin/pen/azvaQBr) |
| 地瓜 | [CodePen](https://codepen.io/huangtzuchin/pen/jEbvXXE) |
| RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/JoYaxQz) |
| poyi | [CodePen](https://codepen.io/poyi-the-flexboxer/pen/EaVeJNy) |
| yu005620 | [CodePen](https://codepen.io/yu-chin-chiang/pen/wBKEVjO) |
| Lin | [CodePen](https://codepen.io/Lin4611/pen/azvRzpZ) |
| Sam.S.T.Y | [CodePen](https://codepen.io/Sam-Yang-the-animator/pen/PwPyNGr) |
| dean | [CodePen](https://codepen.io/ch933114/pen/zxvmKmo)|
| 阿鵝 | [CodePen](https://codepen.io/noracami/pen/empPByG)|
| wei_0982 | [CodePen](https://codepen.io/nico-lai/pen/WbQawBp) |
| dPi | [CodePen](https://codepen.io/snijqlte-the-bold/pen/dPYgOOq) |
| Loder | [CodePen](https://codepen.io/rgbkomhs-the-flexboxer/pen/KwdGrmZ) |
| Candace | [CodePen](https://codepen.io/Candace802/pen/qEOQPBj) |
| 阿Kai | [CodePen](https://codepen.io/kaihuang3013/pen/ogjVaez) |
| Toung | [CodePen](https://codepen.io/Toung/pen/NPGJJzW)
| Rexlin | [CodePen](https://codepen.io/Rexlin595/pen/bNVZXag)|
<!--
| user | [CodePen]() |
-->
Sign in with Wallet
Connect another wallet