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

# 檢核點 - 第三週

**重點觀念：**

1. 使用 Vue 指令（v-for, v-if, $refs, 註冊 Vue/data/mounted/methods）
2. Level 2 取得、新增、編輯、刪除產品串接 API
3. 物件傳參考

**回覆參考：**

Level 3：
新增、修改、刪除的運作上都是正確的，也避免了傳參考的錯誤，恭喜過關

---
**後台登入頁面：**
* formSubmitHandler 可以直接套用在 form @submit 上
（其他建議可以參考第二週）

**後台產品頁面：**

操作測試：
* 新增、編輯、刪除功能
* 編輯功能不可以在還沒存時就更新 *（對應下方程式碼第3點）*
* 沒填到必填的欄位需要出現 alert 提示訊息，內容需要回傳 response.data.message
* 編輯完成、按下取消應關閉、彈出視窗
* 圖片呈現上有變形的問題
* 圖片要正確顯示可在圖片上按下右鍵 -> "複製圖片位址"
* 文案及內容可以試著補上更豐富的內容，如：不同的標題、圖片，詳細的產品說明
* 原價/售價記得加上 min=0 否則會可以選擇負的數值
* 先點擊編輯產品，再點擊 Modal 外的地方來關閉 Modal 後，再點擊新增產品按鈕，是否會出現上一個產品的資料

程式碼：
* 建議使用文件中所提供的資料欄位
* token 可以在 created 或是 mounted 寫，就不需要每個函式都寫
* 編輯時有物件傳參考的問題，請確保編輯物件與原始物件參考不是同一個
* 使用 Vue 的情況下，不建議另外使用原生的 JS 監聽
* v-for=“(product, index) in products” 記得補上 :key
* 原價、售價的 v-model 要加上 number 修飾符
* 建議減少 div 標籤的使用，如果只要用 v-if 來判斷區塊是否顯示，可以改為 template 標籤。讓 HTML 結構更加精簡

如果他是接前台頁面 API：
* 用戶端的頁面不需要加上 Token，Token 是屬於安全性的資料，不應該呈現於前台頁面上（實作中請避免此行為）

樣式建議：
* Bootstrap 的 CSS 建議往上放，放到 head 標籤內（樣式優先呈現）