---
# System prepended metadata

title: Vue3 直播班 vee-validate 4 問題紀錄

---

# Vue3 直播班 vee-validate 4 問題紀錄

- 後台編輯商品，同樣商品點擊第二次編輯時，modal 中欄位消失。
    - 詳細狀況: modal 欄位綁定 vee-validate ，透過編輯 button  連續開啟兩次同樣商品，modal 欄位會消失，若移除開啟 modal 時的  `this.$refs.form.resetForm();` 則可回覆正常。
    - 6/24 每日問題 第七題 Jessie Cheng  同學的提問: https://hackmd.io/6qdh-B3ZTYKRNipSouQtVg


---

- 後台商品頁，點擊新增商品，再點擊編輯商品(任一)，會噴錯
    - 詳細狀況: modal 欄位綁定 vee-validate ，點擊新增商品會使用 `xxx = {} ` 轉為空物件語法，導致 vee-validate 驗證的屬性無正確讀取因此出錯
    - 解法:在新增商品的 `xxx = {}` 中補上驗證的屬性。
    - 6/22 每日問題 第 2 題 Echo Hui 的提問: https://hackmd.io/kb50HM8RRlyxs0elRcvuyQ
     
---
- 上傳圖片 input 使用 vee-validate 驗證
    - - 6/22 每日問題，第6題 Jordan_Tseng 同學的提問: https://hackmd.io/UpFBaRN6SMK0liw57h-Row?view
    - 由於 vee-validate 的 <Field> 標籤無法使用 ref 獲取，但卻可以使用 slot 替換因此可寫成:
```
<Field name="求職照片">
 <input
   id="costumerInfoPersonalImg"
   type="file"
   class="form-control"
   :class="{ 'is-invalid': errors['求職照片'] }"
   placeholder="請選擇照片上傳"
   ref="costumerInfoPersonalImg"
 />
</Field>
```

     