# 🏅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 / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| Michael | [CodePen](https://codepen.io/RenHuang-Huang/pen/xxojvyp) |
| Hilda | [CodePen](https://codepen.io/vwquikad-the-vuer/pen/BagdKxB.) |
|HsienLu|[CodePen](https://codepen.io/Hsienlu/pen/NWZvNex)|
|anderson666|[CodePen](https://codepen.io/goodmanbuild/pen/qBzXZLy)|
|Aden|[CodePen](https://codepen.io/Osases/pen/PorKzoq)|
|mu mu|[CodePen](https://codepen.io/ishuki916/pen/oNrexQa)|
|rjjq|[CodePen](https://codepen.io/rjjq/pen/jOjLrMw)|
|末次|[CodePen](https://codepen.io/yunjulee/pen/yLdoJLo)|
|阿B|[CodePen](https://codepen.io/Abby-Chou/pen/PorKzKz)|
|Mika|[CodePen](https://codepen.io/mikac_tw/pen/QWXMEqM)
|Mars|[CodePen](https://codepen.io/MarsKuo/pen/jOjLrYa)
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/XWLaKRP) |
| Shin | [CodePen](https://codepen.io/shin9626/pen/oNreLRX) |
| 皮克 | [CodePen](https://codepen.io/yen-kg/pen/oNROVXQ) |
| 77 | [CodePen](https://codepen.io/Chichi-Chen/pen/JjQyKLq)|
| Eric0823 | [CodePen](https://codepen.io/a7901477/pen/OJejRao) |
| Tough life | [CodePen](https://codepen.io/hakuei0115/pen/oNreYGd)|
| 好了啦 | [CodePen](https://codepen.io/j-z-the-flexboxer/pen/NWZvbNZ)|
| 蛋黃 |[CodePen](https://codepen.io/yiyun12o9/pen/poXrRNW)
| KK | [CodePen](https://reurl.cc/ZVj6b6) |
| Dolce_墨 | [CodePen](https://codepen.io/DolceTseng1026/pen/NWZvdLa) |
| Kevin Wei | [CodePen](https://codepen.io/kevin21305991/pen/zYVdNXX) |
| Yuwen | [CodePen](https://codepen.io/Yuwen-the-reactor/pen/wvLqJej)
| YO | [CodePen](https://codepen.io/Y-1717/pen/jOjLLKJ)|
| zaoannihao | [CodePen](https://codepen.io/ckhwdvrx-the-solid/pen/MWMvEeK) |
| Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/RwzZLXm) |
| Jay | [CodePen](https://codepen.io/yeeyaha-jay/pen/eYwEeZV) |
| Anna | [CodePen](https://codepen.io/anna971053/pen/dyBzVze) |
| Abby | [CodePen](https://codepen.io/abby1125/pen/LYKjJdR) |
| kuolun | [CodePen](https://codepen.io/kuolun/pen/XWLaPGm) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/poXrqRQ) |
| Barry1104 | [CodePen](https://codepen.io/barry1104/pen/MWMvZGd) |
| Zhu | [CodePen](https://codepen.io/codepenplayer/pen/XWLagwG) |
| willy0719 | [CodePen](https://codepen.io/DOBEST/pen/bGPoEMK) |
| SKey | [CodePen](https://codepen.io/Dale-Chien/pen/eYwGZBJ) |
| Rumi | [CodePen](https://codepen.io/Tzuru-Chen/pen/ExBwKBb) |
| imsmallnew | [CodePen](https://codepen.io/imsmallnew/pen/ExBwyBr) |
| zhen | [CodePen](https://codepen.io/yunnnz/pen/KKjXZXx)
| sandra191919 | [CodePen](https://codepen.io/a0960529965/pen/VwJzmVq) |
| anthy7154 | [CodePen](https://codepen.io/hnhmgzbw-the-sans/pen/LYKzQVW) |
| 小趴 | [Codepen](https://codepen.io/papa2415/pen/yLdzQjo) |
| cherylxie | [Codepen](https://codepen.io/fi7933201/pen/rNEGoRX) |
| dodo |[Codepen](https://codepen.io/MissDouble/pen/abgLreL) |
| Letitia | [Codepen](https://codepen.io/letitia-chiu/pen/xxoXvxB) |
| JC | [Codepen](https://codepen.io/jy_123/pen/ExBwqPr) |
| ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/JjQOZOb)|
| Renee |[Codepen](https://codepen.io/renee_wu/pen/MWMOZQB)|
| Danny | [CodePen](https://codepen.io/danny666/pen/MWMrrYv) |
| duchi | [CodePen](https://codepen.io/sqaz0502/pen/poXpBve) |
| CharisLai | [CodePen](https://codepen.io/charislai/pen/eYwVRBp) |
| cami | [CodePen](https://codepen.io/irisLife/pen/PorQQpm)|
| World | [CodePen](https://codepen.io/HexschoolVuePujols/pen/zYVjoMb)|
| Ching | [CodePen](https://codepen.io/huangching/pen/KKjJWza) |
| Triple | [CodePen](https://codepen.io/riku30/pen/abgPRjd)
| Eden |[Codepen](https://codepen.io/iseden/pen/ZEgpPmM)|
| 叮咚 |[Codepen](https://codepen.io/pinchieh-lin/pen/ByaQZKb)|
<!--

| user | [CodePen]() |

-->