# 🏅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 / 答案 |
|:----------:|:----------------------------------------------------:|
| thchen2002 | [CodePen](https://codepen.io/thchen2002/pen/vENezor) |
| Clove_墨 | [CodePen](https://codepen.io/CloveTseng1026/pen/xbwXybL) |
| RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/ByowGyz) |
| Gui | [CodePen](https://codepen.io/guitimliu/pen/NPGaERj) |
| 地瓜 | [CodePen](https://codepen.io/huangtzuchin/pen/ZYbXmJj) |
| han | [Codepen](https://codepen.io/iamHanCheng/pen/XJmeyBG) |
| poyi | [Codepen](https://codepen.io/poyi-the-flexboxer/pen/raOGQQR) |
| DaRon | [Codepen](https://codepen.io/daron0811/pen/GgpMPXG) |
| dPi | [Codepen](https://codepen.io/snijqlte-the-bold/pen/GgpMPEy) |
| haohaoliao | [Codepen](https://codepen.io/yuyuyuhaohao/pen/ZYbJQyQ) |
| dean | [Codepen](https://codepen.io/ch933114/pen/RNWLYGZ) |
| wanghuaiying | [Codepen](https://codepen.io/huaiying/pen/MYaEdmb)
| 7lun | [Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/wBKrLMz)
| 黛西 | [Codepen](https://codepen.io/ChiashengLin/pen/wBKrLJg)
| 登登登 | [Codepen](https://codepen.io/Duncanin/pen/XJmeLpP)
| Candace | [Codepen](https://codepen.io/Candace802/pen/bNVoPKr)
| 阿Kai | [Codepen](https://codepen.io/kaihuang3013/pen/pvjWMdm)
| Lin | [Codepen](https://codepen.io/Lin4611/pen/JoYOowW)
| yu005620 | [Codepen](https://codepen.io/yu-chin-chiang/pen/PwPOPYq)
| bonnieli1414 | [Codepen](https://codepen.io/bonnieli1414/pen/zxvPoVW)
| Rexlin | [Codepen](https://codepen.io/Rexlin595/pen/GgpOrBq)
| Momoze | [Codepen](https://codepen.io/mleczmam-the-typescripter/pen/vENWxJZ)
| ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/KKjqbEP)|
| Allen_Lin | [CodePen](https://codepen.io/lcf7891/pen/raOYzmX) |
| Sam.S.T.Y | [CodePen](https://codepen.io/Sam-Yang-the-animator/pen/jEbaaXZ) |
| Loder | [CodePen](https://codepen.io/rgbkomhs-the-flexboxer/pen/PwPOQwy) |
| 地呱 | [Codepen](https://codepen.io/LHung/pen/YPyEoLK) |
| kat | [Codepen](https://codepen.io/Nek0u0/pen/ZYbvLvv) |
| 肉桂卷 | [Codepen](https://codepen.io/ginnlee/pen/OPyzvXJ) |
| 牙山 | [Codepen](https://codepen.io/Tzuru-Chen/pen/NPGXOGE) |
| 禹成林 | [Codepen](https://codepen.io/useirin/pen/PwPEyqe) |
| jimmy | [Codepen](https://codepen.io/JimmyMao/pen/PwPOGjQ) |
| David0799 | [Codepen](https://codepen.io/David0799/pen/NPGpMbx) |
| 阿昌 | [Codepen](https://codepen.io/ychleo102615/pen/empVYvE) |
| Clarence | [Codepen](https://codepen.io/Clarence-Lin/pen/ogjEgoX) |
| 阿鵝 | [Codepen](https://codepen.io/noracami/pen/PwPQpNG) |
| 小羊 | [Codepen](https://codepen.io/allen9630308/pen/YPyeEKv) |
|wei_rio|[CodePen](https://codepen.io/wei_wu/pen/KwdQRNZ)|
| Kai | [Codepen](https://codepen.io/beginneraboutlife116/pen/azvGGVj) |
|白雪 | [Codepen](https://codepen.io/weiwei032835-the-styleful/pen/MYaGGbo) |
|William Hsieh | [Codepen](https://codepen.io/lsaimqxa-the-vuer/pen/ByoVpOM) |
|Chen | [Codepen](https://codepen.io/JGM-C/pen/raOKzOy) |
|叮咚 | [Codepen](https://codepen.io/pinchieh-lin/pen/azvKjWN) |
|ScarT | [Codepen](https://codepen.io/Acadia/pen/yyYqVRE) |
| Toung | [Codepen](https://codepen.io/Toung/pen/WbQaeMG) |
| Rogan | [Codepen](https://codepen.io/RoganHsu/pen/NPNXJdm) |
<!--

| 匿称 | [Codepen]() |

-->