# 🏅Day9 - Vue.js 的黑魔法：Methods

## Methods
在 Composition API 中，我們可以直接定義方法來處理用戶事件，

例如點擊、輸入內容等事件：

<iframe height="300" style="width: 100%;" scrolling="no" title="Composition API：v-bind 範例 (4)" src="https://codepen.io/yen-kg/embed/mdYgobY?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/mdYgobY">
Composition API：v-bind 範例 (4)</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

這些方法可以直接在模板中綁定，並透過觸發事件來執行裡面的內容。

題目
---
操作 [這個模板](https://codepen.io/yen-kg/pen/oNROVXQ)，執行以下要求（只能操作 script 的部分）：

* 請利用 methods 的方式，替「加入購物車」按鈕新增一個功能：

當點擊時可以跳出「您已將(水果名稱) 加入購物車」的吐司訊息，並且該訊息會在三秒後自動隱藏。

**( 提示：可以利用 `push` 的方式將訊息丟進 `toasts` 陣列中，利用 `setTimeout` 的方式設定三秒鐘，之後使用 `shift()` 移除訊息 )**


## 回報流程

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


<!-- 解答：
const addProduct = (fruit) => {
const message = `您已將 ${fruit.title} 加入購物車`;
toasts.value.push({ message });

// 自動隱藏吐司
setTimeout(() => {
toasts.value.shift();
}, 3000); // 3秒後自動隱藏
}
-->

回報區
---

| Discord | CodePen / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| 登登登 | [CodePen](https://codepen.io/Duncanin/pen/PwPOzJz) |
| thchen2002 | [CodePen](https://codepen.io/thchen2002/pen/vENWKdO) |
| Clove_墨 | [CodePen](https://codepen.io/CloveTseng1026/pen/WbQXxYd) |
| yu005620 | [CodePen](https://codepen.io/yu-chin-chiang/pen/qEOVqqV) |
| Gui | [CodePen](https://codepen.io/guitimliu/pen/gbaXLdN) |
| wanghuaiying | [Codepen](https://codepen.io/huaiying/pen/ByomQEN)
| 地瓜 | [CodePen](https://codepen.io/huangtzuchin/pen/jEbaVgy)
| bonnieli1414 | [CodePen](https://codepen.io/bonnieli1414/pen/vENWgYq) |
| RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/jEbaVwP) |
| haohaoliao | [CodePen](https://codepen.io/yuyuyuhaohao/pen/KwdyNLa) |
| dean | [CodePen](https://codepen.io/ch933114/pen/zxvPNbX) |
| Rexlin | [CodePen](https://codepen.io/Rexlin595/pen/XJmzMrQ) |
| Momoze | [CodePen](https://codepen.io/mleczmam-the-typescripter/pen/LEpOWmx) |
| poyi | [CodePen](https://codepen.io/poyi-the-flexboxer/pen/ogjoZqB) |
| Lin | [CodePen](https://codepen.io/Lin4611/pen/zxvPwOK) |
| Candace | [CodePen](https://codepen.io/Candace802/pen/bNVYqzO) |
| ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/JjQOZOb)|
| wei_0982 | [Codepen](https://codepen.io/nico-lai/pen/ByomRXN)|
| DaRon | [Codepen](https://codepen.io/daron0811/pen/qEOVjXw)|
| dPi | [Codepen](https://codepen.io/pen/ByomZwQ)|
| Allen_Lin | [CodePen](https://codepen.io/lcf7891/pen/myeqMLq) |
| Sam.S.T.Y | [CodePen](https://codepen.io/Sam-Yang-the-animator/pen/vENWWwG) |
| 7lun | [CodePen](https://codepen.io/mfyvqhsn-the-bold/pen/MYaOrQM) |
| 阿Kai | [CodePen](https://codepen.io/kaihuang3013/pen/jEbaLmQ) |
| Loder | [CodePen](https://codepen.io/rgbkomhs-the-flexboxer/pen/empeVRB) |
| 地呱 | [Codepen](https://codepen.io/LHung/pen/zxvpOgP) |
| 肉桂卷 | [Codepen](https://codepen.io/ginnlee/pen/JoYMLNa) |
| 牙山 | [CodePen](https://codepen.io/Tzuru-Chen/pen/ByoJqQq) |
| Sam | [CodePen](https://codepen.io/Sammy-the-styleful/pen/ZYbvwKG) |
| jimmy | [CodePen](https://codepen.io/JimmyMao/pen/ogjEvzW) |
| David0799 | [CodePen](https://codepen.io/David0799/pen/MYapGoo) |
| 阿昌 | [CodePen](https://codepen.io/ychleo102615/pen/YPyezeM) |
| 黛西 | [CodePen](https://codepen.io/ChiashengLin/pen/yyYveYK) |
| 阿鵝 | [CodePen](https://codepen.io/noracami/pen/GgpQWmj) |
| 小羊 | [CodePen](https://codepen.io/allen9630308/pen/zxvRPvz) |\
|wei_rio| [CodePen](https://codepen.io/wei_wu/pen/JoYpvrQ)|
|Clarence| [CodePen](https://codepen.io/Clarence-Lin/pen/raOvNEz)|
|白雪| [CodePen](https://codepen.io/weiwei032835-the-styleful/pen/Qwjrrzg)|
| William Hsieh | [CodePen](https://codepen.io/lsaimqxa-the-vuer/pen/GgpGWKP) |
| Chen | [CodePen](https://codepen.io/JGM-C/pen/jEbKLBq) |
| 叮咚 | [CodePen](https://codepen.io/pinchieh-lin/pen/wBKXENM) |
| ScarT | [CodePen](https://codepen.io/Acadia/pen/JoYBaVZ) |
| Toung | [Codepen](https://codepen.io/Toung/pen/gbaBYZa) |

<!--
| user | [CodePen]() |

-->