Day9 - Vue.js 的黑魔法：Methods

備註

本站 Vue 的撰寫風格都是 Composition API

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

Methods

在 Composition API 中，我們可以直接定義方法來處理用戶事件，例如點擊、輸入內容事件等…

---

Topic

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

• 請利用 methods 的方式，替「加入購物車」按鈕新增一個功能：
  • 當點擊時可以跳出「您已將(水果名稱) 加入購物車」的吐司訊息，並且該訊息會在三秒後自動隱藏。

提示：可以利用 push 的方式將訊息丟進 toasts 陣列中，利用 setTimeout 的方式設定三秒鐘，之後使用 shift() 移除訊息 )

<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>
    <div class="toast-container position-fixed top-0 end-0 p-3">
      <div v-for="(toast, index) in toasts" :key="index" class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-body">
          {{ toast.message }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";

const toasts = 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

<script setup>
import { ref } from "vue";

const toasts = ref([]);
const addProduct = (fruit) => {
  const message = `您已將 ${fruit.title} 加入購物車`;
  toasts.value.push({message});
  
  setTimeout(()=> {
    toasts.value.shift();
  },3000)
}
</script>

思考與反饋

• 依據題目要求新增了 addProduct，先使用 alert('') 小步測試
• 提示說使用 .push() 將訊息推入，一開始寫 toasts.push(message)，訊息推不進去，深入了解了 ref 的觀念：

  import { ref } from 'vue';
  const toasts = ref([]);

  的時候，ref() 會將傳入的資料打包成物件，像這樣：

  {
    value: []
  }

  所以不管是讀取還是寫入時都要改成寫 .value
• 加上 .value 還是不能正確渲染，則是因為 .push(message) 是推入了純字串，所以應該要改成物件 .push({message})

學習的地方

• 很少用到 .shift()，這裡筆記了一下以及 .pop() 的差異性：
  • .pop()
  • .shift()

---

CODE

連結到 Codepen