---
tags: Vue 直播班 - 2022 春季班
---

# 🏅 Day 45
###### tags: `Vue 直播班 - 2022 春季班`

題目 (請將答案貼上 CodePen)
---
操作 [這個模板](https://codepen.io/rider159159/pen/LYWXJyd)，執行以下要求 (只能操作 JS 的部分):

> mixins 讓元件程式碼可重複利用
> - 在 nike 、 adidas 、 reebok 元件中分別以 mixin 方式引入 filterMix，讓商品價格左側多顯示 $ 字號
> - 提示一: 請勿直接調整 template
> - 提示二: 添加 $ 字號方法已經在 filterMix 設定好，同學只需在個別元件中以 mixin 方式引入 filterMix
> - 實際狀況如圖:
> 

mixins 方法可參考: https://courses.hexschool.com/courses/vue-20212/lectures/35988943

回報流程
---
請同學依照下圖教學觀看解答、回報答案:


回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」)


<!-- 解答

app.component('nike', {
mixins:[filterMix],
data() {
......
}
});

app.component('adidas', {
mixins:[filterMix],
data() {
.....
}
});

app.component('reebok', {
mixins:[filterMix],
data() {
...
}
});

-->

回報區
---
| 報數 |組別/名字 | codepen / 其他回饋 |
|:--------:| -------- | -------- |
| 1 | Iris Huang | https://codepen.io/ythuang/pen/XWzONzg |
| 2 | Larry | https://codepen.io/larrylinr5/pen/MWOLbEb |
| 3 | Bruno Yu | https://codepen.io/bruno-yu/pen/QWOYGqj |
| 4 | CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/podGNWb|
| 5 | 肉鬆 | https://codepen.io/klrkicog/pen/JjOxbpL |
| 6 | Jason Chen | https://codepen.io/jason60810/pen/QWOYGPK |
| 7 | Gill | https://codepen.io/Gill-Chin/pen/ExbrZZd?editors=1010 |
| 8 | 泇吟~♪ | https://codepen.io/kljuqbxs/pen/PoOVWBW |
| 9 | 黃士桓 | https://codepen.io/shr-huan-huang/pen/zYPeZYV |
| 10 | Pei Ying | https://codepen.io/Pei-Ying/pen/mdqvWdW?editors=1011 |
|11| POPEYE |https://codepen.io/popeye_ux/pen/eYexvJa |
|12| Sheep | https://codepen.io/SheepNDW/pen/JjOxWKY |
| 13 | Yunei | https://codepen.io/Yunei/pen/mdqvWWM |
|14|kk|https://codepen.io/potatokaka/pen/ExbrWmj?editors=1010|
| 15 | 威爾 | https://codepen.io/WILL_Wu/pen/jOadBpR |
|16|Rick Tzeng|https://codepen.io/rick917jp6/pen/podGeYz |
|17|Arista|https://codepen.io/arista-hsieh/pen/LYOqLpq |
|18|Henry Wu |https://codepen.io/dkcmlaww-the-flexboxer/pen/LYOqjbN |
|19|andersonshen| https://codepen.io/luxyenni-the-bold/pen/ZEawXdX |
|20|陳暐中| https://codepen.io/wei-z/pen/rNYPJQz |
|21|Jasper|https://codepen.io/li-jasper/pen/xxPBKap |
|22|ZY Hsu|https://codepen.io/zihyin/pen/KKyEKRy?editors=1010 |
|23| Karen Huang | https://codepen.io/Coding_Snorlax/pen/KKyEwxE?editors=1010 |
|24| mei | https://codepen.io/Shila-Chen/pen/ExbMbrG |
|25|Otis|https://codepen.io/humming74/pen/QWOoaNQ?editors=1010|
|26|咖咖|https://codepen.io/gon790219/pen/xxPBYEg |
| 27 | YC | https://codepen.io/YCLu/pen/GROeapQ |
| 28 | Charlotte Lee | https://codepen.io/charlotte-lee/pen/MWOxMjp?editors=1010 |
| 29 | Wenfish | https://codepen.io/wenfisht/pen/ZEaNOpp |
| 30 | 紙飛機 | https://codepen.io/paperplanea/pen/yLpLOEv |
| 31 | sihle | https://codepen.io/bugbug777/pen/jOYOmxL |
|32|Gui|https://codepen.io/guitimliu/pen/WNdmVwm
|33|JD孟璁|https://codepen.io/oikdkmxq-the-looper/pen/YzezxOP?editors=1111 |