---
tags: Vue 直播班 - 2021 夏季班
---

# 檢核點 - 第五週

**重點觀念：**
1. 前台購物車操作流程
2. Vee Validate 套件使用
3. loading 效果

**回覆參考：**

購物車操作行為完整，整體流程順暢，沒有太大的問題，恭喜過關

**注意：**

測試表單功能建議不要填寫自己的 email, 姓名等等真實資訊

---
**前台產品頁面：**

* 注意要接的是前台的 API (url 不包含 admin)
* 送出訂單後，購物車需要清除原本內容
* 用戶端的頁面不需要加上 Token，Token 是屬於安全性的資料，不應該呈現於前台頁面上（實作中請避免此行為）
* 有使用 AJAX 行為的部分都可以加上 loading 效果
* 表單中的 email 、 電話、地址 的 label for 、input id 是否有對上
* 驗證欄位是否都有正確
- 姓名：必填
- Email：必填 / 需要符合格式 / input type 為 email
- 電話：必填 / 超過 8 碼 / input type 為 tel
- 地址：必填
- 留言：非必填
- 提示訊息請改為中文

助教新增建議：

* 當購物車沒有產品時可以設計不同畫面，讓清空按鈕不見，或是無法點擊的狀態
* 在商品細節 modal 加入購物車後可以關閉 modal

- 同學提問過，有找一段時間的問題: 修改購物車中商品數量 API 會使用到兩種 id ，以[官方範例](https://github.com/hexschool/live-vue3-training-chapter-works/blob/master/week5/javascript/app2.js#L92)來說 API 網址會使用到 `${data.id}` ，而帶上的參數資料會使用到 data.product_id

- [同學提問](https://rpg.hexschool.com/admin/task/confirm/index#/task/review/19391)要怎麼定義 veevalidate 驗證訊息（應該是這個意思xd)：參考[說明文件](https://vee-validate.logaretm.com/v4/guide/i18n#:~:text=configure(%7B%0A%20%20//%20Generates%20an%20English%20message%20locale%20generator%0A%20%20generateMessage%3A%20localize(%27en%27%2C%20%7B%0A%20%20%20%20messages%3A%20%7B%0A%20%20%20%20%20%20required%3A%20%27This%20field%20is%20required%27%2C%0A%20%20%20%20%7D%2C%0A%20%20%7D)%2C%0A%7D)%3B)設定

configure({
  // Generates an English message locale generator
  generateMessage: localize('en', {
    messages: {
      required: 'This field is required',
    },
  }),
});

如果定義的規則名稱和預設的不同，例如：defineRule(‘number’, numeric);
.json 檔沒有定義 number 的驗證訊息，就需要自行定義

- [問題連結](https://rpg.hexschool.com/admin/task/confirm/index#/task/review/19431)（第 6 題）
`<template v-if=“cart.carts”></template>`
當 cart.carts 為空陣列時，就會報錯 `Uncaught TypeError: Cannot read property ‘cart’ of undefined`
解決方式 → 若會報錯的話可以在 data 那邊給初始值 carts:[]

- 問題：在 vue devtool 查看元件有出現 Fragment 狀態
→ 可以參考 Vue.js 官方文件說明，大概說明 Vue3 可以在 template 支援多個 DOM 根節點（Vue2 則不支援，需透過其他方式綁定 DOM），不是錯誤，也不影響資料操作
[參考](https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/752569/#outline__6)、[參考](https://v3.vuejs.org/guide/migration/fragments.html#overview)

- 問題：同學希望製作雙語切換的頁面 → 如果需要顯示不同語言，可以參考 [Vue i18n 套件](https://kazupon.github.io/vue-i18n/)支援不同語言，[參考做法](https://www.minwt.com/webdesign-dev/js/20464.html)，也可以搜尋 Vue i18n 看看其他的做法範例

- 問題：vee-validate 套件想切換不同語言 → 參考 [vee-validate 說明文件](https://vee-validate.logaretm.com/v4/guide/i18n#overview)，有提到可以使用 setLocale() 來更改語言