---
# System prepended metadata

title: "\U0001F3C5Day21 - todolist 實作篇 ：編輯資料功能"
tags: [2025 Vue 前端體驗營]

---

# 🏅Day21 - todolist 實作篇 ：編輯資料功能

編輯資料的操作行為可以分為 3 個部分：
1. 編輯的畫面操作：點擊按鈕，切換 input 編輯框顯示
2. 編輯的函式說明
3. 編輯資料 API 使用 PUT

以下為此 3 部分的程式碼邏輯與說明：

## 1. 編輯的畫面操作：點擊按鈕，切換 input 編輯框顯示

![HitPawOnline_222714](https://hackmd.io/_uploads/rJKA87HFA.gif)

首先拿到資料的時候，會將所有的資料加上 `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 發生變化時，會將更新值存放在暫存區

![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 帶入需要更改的資料內容

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

![](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 / 答案                            |
|:----------------:|:-------------------------------------------------------------------:|
| 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]() |

-->