# 🏅Day8 - Vue.js 的基礎魔法：總結練習

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

1.請利用 `v-for` 將水果資料渲染出來，並且使用 `v-bind` 的方式加上圖片，利用 `v-on` 的方式當點擊「加入購物車」按鈕時會跳出 alert。

2.下方的 `select` 請使用 `v-for` 渲染出選項，利用 `v-model` 綁定，選擇水果時會正確呈現出 selected 值。


## 回報流程

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


<!-- 解答：
<template>
<div id="app" class="container">
<div class="row">
<template v-for="(fruit, index) in fruitData" :key="index">
<div class="col-md-6 mb-3">
<div class="card" style="width: 100%;">
<img :src="fruit.imgUrl" class="card-img-top w-25" :alt="fruit.title">
<div class="card-body">
<h5 class="card-title">水果名稱：{{ fruit.title }}</h5>
<p class="card-text my-2">價錢：{{ fruit.price }}</p>
<p class="card-text mb-3">數量：{{ fruit.count }}</p>
<a href="#" class="btn btn-primary" @click="addProduct(fruit)">加入購物車</a>
</div>
</div>
</div>
</template>
</div>

<select class="form-select mb-2" v-model="selected">
<option
v-for="fruit in fruitData"
:key="fruit.title"
:value="fruit.title"
>
{{ fruit.title }}
</option>
</select>
<div class="mt-3">
透過 select 選擇的水果：<span class="fw-bold">{{ selected }}</span>
</div>
</div>
</template>
-->

回報區
---

| Discord | CodePen / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| Michael | [CodePen](https://codepen.io/RenHuang-Huang/pen/poXVwxX) |
| Hilda | [CodePen](https://codepen.io/vwquikad-the-vuer/pen/KKjqGRN) |
| Eric0823 | [CodePen](https://codepen.io/a7901477/pen/QWXgZxE) |
| anderson666 | [CodePen](https://codepen.io/goodmanbuild/pen/KKjqGbW) |
| Aden | [CodePen](https://codepen.io/Osases/pen/ExBXOxe) |
| cherylxie | [CodePen](https://codepen.io/fi7933201/pen/ExBXdzR) |
| chichi | [CodePen](https://codepen.io/chichihuang/pen/rNEwqbJ) |
| 77 | [CodePen](https://codepen.io/Chichi-Chen/pen/KKjqrwv) |
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/VwJWVvo) |
| Zhu | [CodePen](https://codepen.io/codepenplayer/pen/eYwRQOV) |
| Tough life | [CodePen](https://codepen.io/hakuei0115/pen/BagZGxZ) |
| 末次 | [CodePen](https://codepen.io/yunjulee/pen/NWZgEya) |
| kuolun | [CodePen](https://codepen.io/kuolun/pen/Porjxxm) |
| 阿B | [CodePen](https://codepen.io/Abby-Chou/pen/wvLeRJx) |
| 皮克 | [CodePen](https://codepen.io/bad-527boy/pen/ExBXGoK) |
|HsienLu|[CodePen](https://codepen.io/Hsienlu/pen/ZEdymwV)|
| ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/KKjqbEP)|
| mu mu |[Codepen](https://codepen.io/ishuki916/pen/MWMoZRa)|
| dodo | [CodePen](https://codepen.io/MissDouble/pen/NWZgoYG) |
| Mika | [CodePen](https://codepen.io/mikac_tw/pen/bGPRzvd) |
| Dolce_墨 | [CodePen](https://codepen.io/DolceTseng1026/pen/gONRqGJ) |
| Tanyaaaa | [CodePen](https://codepen.io/tanya77777/pen/NWZgJdj) |
| 好了啦 | [CodePen](https://codepen.io/j-z-the-flexboxer/pen/qBzjvoe) |
| rjjq | [CodePen](https://codepen.io/rjjq/pen/GRbEbNp)|
| KK | [CodePen](https://reurl.cc/xvEr94) |
| Renee | [CodePen](https://codepen.io/renee_wu/pen/LYKLwdW) |
| zaoannihao | [CodePen](https://codepen.io/ckhwdvrx-the-solid/pen/rNEzBLj) |
| YO | [CodePen](https://codepen.io/Y-1717/pen/xxoLKbr) |
| Shin | [CodePen](https://codepen.io/shin9626/pen/JjQyPML) |
| 阿鵝 | [CodePen](https://codepen.io/noracami/pen/OJejLYV) |
| Kevin Wei | [CodePen](https://codepen.io/kevin21305991/pen/zYVdYLb) |
| Mars | [CodePen](https://codepen.io/MarsKuo/pen/yLdoJXv) |
| Yuwen | [CodePen](https://codepen.io/Yuwen-the-reactor/pen/LYKjbdr)
| sandra191919 | [CodePen](https://codepen.io/a0960529965/pen/GRbvNVK)
| Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/mdZMBzg) |
| Jay | [CodePen](https://codepen.io/yeeyaha-jay/pen/YzoxrBB) |
| Abby | [CodePen](https://codepen.io/abby1125/pen/ZEdJMLP) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/abgyPmo) |
| Barry1104 | [CodePen](https://codepen.io/barry1104/pen/NWZvegz) |
| 咖咖 | [CodePen](https://codepen.io/gon790219/pen/NWZvVYK) |
| imsmallnew | [CodePen](https://codepen.io/imsmallnew/pen/QWXqjrg) |
| SKey | [CodePen](https://codepen.io/Dale-Chien/pen/gONxrvJ) |
| Rumi | [CodePen](https://codepen.io/Tzuru-Chen/pen/OJexNMB) |
| zhen | [CodePen](https://codepen.io/yunnnz/pen/vYqeWKP) |
| anthy7154 | [CodePen](https://codepen.io/hnhmgzbw-the-sans/pen/eYwGyxq) |
| floya9733 | [CodePen](https://codepen.io/TZU68/pen/XWLeEOP) |
| 小趴 | [Codepen](https://codepen.io/papa2415/pen/poXWQpP)|
| Letitia | [Codepen](https://codepen.io/letitia-chiu/pen/gONGNqa) |
| JC | [Codepen](https://codepen.io/jy_123/pen/JjQrQMa) |
| duchi |[Codepen](https://codepen.io/sqaz0502/pen/JjQORPx) |
| 貢波波夫 |[Codepen](https://codepen.io/mxgrfgcr-the-bashful/pen/ZEdaoxq) |
| Peter |[Codepen](https://codepen.io/peterhsj/pen/wvLprZQ) |
| Danny | [CodePen](https://codepen.io/danny666/pen/mdZpBGp) |
| Triple | [CodePen](https://codepen.io/riku30/pen/Rwzxdxe) |
| CharisLai | [CodePen](https://codepen.io/charislai/pen/mdZXmaB) |
| Erin | [CodePen](https://codepen.io/erin-feng/pen/MWMVxXW) |
| World | [CodePen](https://codepen.io/HexschoolVuePujols/pen/vYqjLxV) |
| Ching | [CodePen](https://codepen.io/huangching/pen/vYqbxYb) |
| Eden | [Codepen](https://codepen.io/iseden/pen/qBeaRzE)|
| 叮咚 | [Codepen](https://codepen.io/pinchieh-lin/pen/JojRxvb)|
<!--

| user | [CodePen]() |

-->