Day8 - Vue.js 的基礎魔法：總複習

2025 Vue 直播班每日任務，藉由一天學一點積沙成塔

Topic

操作提供的模版，執行以下要求（只能修改 HTML 的部分）：

• 請利用 v-for 將水果資料渲染出來，並且使用 v-bind 的方式加上圖片，利用 v-on 的方式當點擊「加入購物車」按鈕時會跳出 alert。
• 下方的 select 請使用 v-for 渲染出選項，利用 v-model 綁定，選擇水果時會正確呈現出 selected 值。

<template>
  <div id="app" class="container">
    <div class="row">
      <template>
        <div class="col-md-6 mb-3">
          <div class="card" style="width: 100%;">
            <img class="card-img-top w-25">
            <div class="card-body">
              <h5 class="card-title">水果名稱：{{}}</h5>
              <p class="card-text my-2">價錢：{{}}</p>
              <p class="card-text mb-3">數量：{{}}</p>
              <a href="#" class="btn btn-primary">加入購物車</a>
            </div>
          </div>
        </div>
      </template>
    </div>

     <select class="form-select mb-2">
        <option>
          {{}}
        </option>
      </select>
      <div class="mt-3">
        透過 select 選擇的水果：<span class="fw-bold">{{}}</span>
      </div>
  </div>
</template>

<!-- 請不要修改下面內容 -->
<script setup>
import { ref } from "vue";

const cartData = ref([]);
const addProduct = (fruit) => {
  alert(`您已將 ${fruit.title} 加入購物車`)
}

const selected = ref('');
const fruitData = ref([
  {
    title: 'apple',
    price: 25,
    count: 50,
    imgUrl: 'https://i.imgur.com/w4sYWlS.jpeg'
  },
  {
    title: 'orange',
    price: 15,
    count: 20,
    imgUrl: 'https://i.imgur.com/PSmzmXi.jpeg'
  },
  {
    title: 'strawberry',
    price: 45,
    count: 10,
    imgUrl: 'https://i.imgur.com/FIMmh6h.png',
  },
  {
    title: 'kiwi',
    price: 55,
    count: 20,
    imgUrl: 'https://i.imgur.com/TIA6v4m.jpeg'
  }
]);
</script>

---

Result

<template>
  <div id="app" class="container">
    <div class="row">
      <template v-for="fruit in fruitData" :key="fruit.title">
        <div class="col-md-6 mb-3">
          <div class="card" style="width: 100%;">
            <img class="card-img-top w-25" :src="fruit.imgUrl" :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 value="" disabled selected>請選擇</option>
        <option v-for="item in fruitData" :key="item.title">
          {{item.title}}
        </option>
      </select>
      <div class="mt-3">
        透過 select 選擇的水果：<span class="fw-bold">{{ selected }}</span>
      </div>
  </div>
</template>

思考與反饋

• 依據題目要求在第 4 行加上 v-for 廻圈渲染 data 到 7-11 行 (並且使用 v-bind)
• 在第 12 行 v-on 使用點擊事件，跳出 alert
• 18 行加上 v-model 來綁定 select 選單，並且在選單列表使用 v-for 抓取 data 的資料渲染到選單
• 23 行渲染出選取的值

學習的地方

• 練習的時候發現對 select 還不太熟悉，會不知道 v-model 要放哪裡，查了一下筆記要怎麼搭配 v-for 來實現，重新再釐清觀念與用法

---

CODE

連結到 Codepen