---
# System prepended metadata

title: "\U0001F3C5 6/25 (五) 每日任務 Day 45"
tags: [Vue 直播班 - 2021 夏季班]

---

# 🏅 6/25 (五) 每日任務 Day 45
###### tags: `Vue 直播班 - 2021 夏季班`

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

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

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



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

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

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

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

<!-- 解答

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

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

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

回報區
---

<!-- 1: Alysa Chan
Codepen: https://codepen.io/alysachan/pen/yLMmoRK?editors=1010
-->

<!-- 2: Lina Chen
Codepen: https://codepen.io/LinaChen/pen/dyvxzQb
-->
<!-- 3 :陳sam
Codepen: https://codepen.io/euldpliv/pen/BaWXdGp
-->

<!--4:Alpha
Codepen:https://codepen.io/alphatero/pen/MWpNEWq
-->

<!--5: yijun
codepen: 
https://codepen.io/sandy3068/pen/MWpNEMg
-->

<!-- Erica
https://codepen.io/ericadu/pen/rNyXYvy
-->

<!-- 7: Yi Chieh
Codepen: https://codepen.io/Yi-Chieh/pen/PopMObx
-->

<!-- 8: leolee
Codepen: https://codepen.io/nekorice/pen/KKWOZzW
-->

<!-- 9: peter.chen1024
codepen: https://codepen.io/JIAN-RONG/pen/YzZmYvz?editors=1010
-->

<!-- 10: Joe Kuo
codepen: https://codepen.io/alertislow/pen/GRWVQrm?editors=0110
-->

<!-- 11: RitaHuang
https://codepen.io/Rita-Rossweisse/pen/ExWqQOV
-->

<!-- 12: Wendy Li
https://codepen.io/rockayumitw/pen/mdWNLXy?editors=1011
-->

<!-- 13: Jay
codepen: https://codepen.io/jayredk/pen/xxqvazm?editors=1010
 -->
<!-- 14:
https://codepen.io/yxzzktmb/pen/gOmVqgW?editors=1010
-->

<!-- 15: Larry
codepen: https://codepen.io/manpower0708/pen/zYwOqLO
-->

<!-- 16: Echo
codepen: https://codepen.io/echohuiecho/pen/mdmbzXO?editors=1010
-->

<!-- 17: jimmyFang
codepen: https://codepen.io/pohxiqqo/pen/MWmYgGX?editors=1010
-->

<!-- 18: Chiang
codepen: https://codepen.io/ChiangJ/pen/QWvwXVZ?editors=1010
-->

<!-- 19: Oober
codepen: https://codepen.io/alysachan/pen/yLMmoRK?editors=1010
-->

<!-- 20: twoz
codepen: 
https://codepen.io/twoz/pen/BaRKoZo?editors=1010
-->

<!-- 21: Stacey Huang
https://codepen.io/staceyhuang/pen/ExmWVJy
-->