# 🏅Day20 - 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：監聽 input 發生變化時，會將更新值存放在暫存區

![HitPawOnline_223253](https://hackmd.io/_uploads/Sy0bcmBKA.gif)

const onEditInputChange = (event, id) => {
editTodo.value = {
...editTodo.value,
[id]: event.target.value,
};
};

值得注意的是這裡多加了一個 id 的屬性，原因是我們會利用陣列 + id 索引的方式來呈現該筆資料

更新值：{{ editTodo[item.id] }}

所以一定要加上 id，才能正確地呈現每筆資料。

* ### saveTodo：按下保存之後會把資料傳送到後端去。

![HitPawOnline_224756](https://hackmd.io/_uploads/BkMgCQSKR.gif)

* ### cancelEdit：關閉編輯模式。

![螢幕錄影 2024-07-29 晚上10.58.22](https://hackmd.io/_uploads/SJBu1VrYA.gif)


## 編輯資料 API 使用 PUT 

編輯資料會使用到 `PUT` 的方式，我們會先帶入產品的 id，

接著在後方 data 帶入需要更改的資料內容

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 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

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

<!-- 解答：
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 / 答案                            |
|:----------------:|:-------------------------------------------------------------------:|
| Michael | [CodePen](https://codepen.io/RenHuang-Huang/pen/jOjKovm) |
| Hilda | [CodePen](https://codepen.io/vwquikad-the-vuer/pen/GRbdZog) |
| Aden | [CodePen](https://codepen.io/Osases/pen/xxojOwb) |
| Tough life | [CodePen](https://codepen.io/hakuei0115/pen/WNqJxbJ) |
| rjjq | [CodePen](https://codepen.io/rjjq/pen/xxojdmo) |
|好了啦|[COdePEn](https://codepen.io/j-z-the-flexboxer/pen/Porejee) |
| KK | [CodePen](https://reurl.cc/vvkkno) |
| SKey | [CodePen](https://codepen.io/Dale-Chien/pen/MWMGzqN) |
| 蛋黃 |[CodePen](https://codepen.io/yiyun12o9/pen/WNqJWpV)
| zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/yLdjmbY) |
| mu mu | [Codepen](https://codepen.io/ishuki916/pen/JjQBERq) |
| mars | [Codepen](https://codepen.io/MarsKuo/pen/LYKBmKO) |
| Kevin Wei |[Codepen](https://codepen.io/kevin21305991/pen/QWXBxVK) |
| World |[Codepen](https://codepen.io/HexschoolVuePujols/pen/bGPjRrr) |
| Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/OJeBBwq) |
| duchi | [CodePen](https://codepen.io/sqaz0502/pen/oNrJYXx) |
| Ching | [CodePen](https://codepen.io/huangching/pen/OJedgPw) |
| Eden | [Codepen](https://codepen.io/iseden/pen/poMRQby)|
| Triple | [CodePen](https://codepen.io/riku30/pen/yLmavRg) |

<!-- 

 | user | [CodePen]() |

-->