---
tags: Vue 直播班 - 2021 夏季班
---
# 6/11 線上 Slack 助教
## 今日助教輪班時間
Ryder：6/11 (五)
回覆時間：下午 2:00 -下午 6:00
## 發問規範
老師助教同學們好，**這是我的 Codepen**，我**原本預期**「JS 第 8 行會出現數字 8」，**但卻出現**「預期外的結果是 0」，想問下問題出在哪裡？
## 注意
1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. 以下問題區塊只能由助教自行增加
5. 助教會將回覆寫在下方問題區塊
## 問題
---
1. Sean wu:
助教您好，這是我的第三週作業[原始檔](https://drive.google.com/file/d/1zRsoMNFj5RSSLdFFb-Xe9ZLBKz8YN-4J/view?usp=sharing)，我是按照老師的加碼影片練習實作，不曉得是哪裡出錯，updateProduct()一直無法順利POST API
出現的錯誤訊息(data: {success: false, message: "驗證錯誤, 請重新登入"})
麻煩指點，謝謝
> 助教回覆：
這邊看同學登入儲存的 cookie 名稱是 SeanToken
不過在 products.js 的 mounted 使用的是小寫的 seanToken，助教這邊有統一大小寫後，就能正確使用新增產品功能囉。
---
2.Erica
老師助教同學好，這是我的第五週作業
在訂單結帳的地方用 this.$refs.form.resetForm() 來清空資料
用 console 檢查也確定有清除
但是結帳完成後 > 再次加入購物車 > 並點選結帳
會出現上一筆資料訂單，表示資料沒有被清除
再麻煩助教幫我看看問題出在哪呢？謝謝
https://github.com/ericacadu/course-work
> 助教回覆：
> 這邊是因為同學 checkout() 後，會執行 getCarts()，而 getCarts() 會獲得 final_total 的值， final_total 獲得值後，就會執行下圖 v-else 的判斷，關閉 DOM，而表單功能是在 v-else 底下，因為 DOM 被關閉 導致表單沒正確清除。
> 
> 簡單來說就是表單外層有使用 v-if 消除 DOM ，導致 this.$refs.form.resetForm() 表單清除功能沒有正確清除 表單的 DOM。
> 解決辦法就是移除 圖中的 v-else 哩。
---
3.Andrew Chang
老師助教同學們好，詢問【第四週作業】，參考課程影片【第三、第四周作業解說-下】將Modal改成【全域註冊】的元件寫法 (products.js _ line 135~283)，並利用$emit觸發外層事件，目前console有跳 [Vue warn]的提示訊息，但執行操作看起來正常(如 updateProduct() 及 deleteProduct())。
◎JS部分:
```
<button type="button" class="btn btn-primary" @click="$emit('update-product', tempProduct)"> (products.js _ line 244)
<button type="button" class="btn btn-danger" @click="$emit('delete-product',tempProduct)"> (products.js _ line 270)
```
◎Html部分:
```
<product-modal :temp-product="tempProduct" :is-new="isNew"
@update-product="updateProduct" @delete-product="deleteProduct"></product-modal>
```
(products.html _ line 58~59)
◎程式路徑:
[GitHub](https://github.com/hungya777/hexSchoolVue3_2021/tree/main/vueWeek4)
[GitHub Page](https://hungya777.github.io/hexSchoolVue3_2021/vueWeek4/)
另外有去google一下[Vue warn], 只要加上 emits: ["update-product","delete-product"] (products.js _ line 136 目前已註解會跳警告訊息) 就不會有警告訊息，因課程教學中沒提到要加emits: []，
請問是否寫法上出現什麼問題? 謝謝您~
> 助教回覆：
> 之所以會跳出警告主要是因為 productModal template 標籤最外層應該還要使用一個 div 將 productModal 、 delProductModal 都包起來，不然 Vue 在渲染元件時會不太穩定哩。
> 不過這邊正確的做法，還是會請同學把 新增商品、刪除產品的 元件拆成兩個，盡量不要放在一起哩。
---
4.Alicia Lo
Ryder助教您好:
我在安裝Vue Cli的時候有顯示許多 npm WARN deprecated(如附圖紅線地方)，原以為是node版本太舊後來更新到最新版，但還是會出現該字樣。不確定問題出在哪裡，再麻煩助教解惑了，謝謝助教~
https://files.slack.com/files-pri/TH78FC3JL-F024MS80LMT/vue_cli.png
> 助教回覆：
這邊的警告都是 Vue Cli 的相依套件，而警告的內容是這些套件不在更新(棄用)，這部分可以暫且不管，因為這些相依套件只是不會更新，而不是不能使用哩。
目前從附圖來看，同學安裝全域的 Vue Cli 沒有問題，會先建議同學往下練習，有問題歡迎在提出來。
---
5.Sec
老師助教同學們好，在ray助教的范例app2.js内的 createOrder function内有一个
```
this.$refs.form.resetForm
```
在范例内没有定义这个function, 它是存在于vue的global, 但是在我的vue global却找不到这个 this.$refs.form.resetForm, 我在submitForm的 function 内有尝试清空 this.form = { } 但是会报错.
https://github.com/SecYJ/Vue-Live-Week-5-Challenge/blob/master/app.js
> 助教回覆：
> 這邊之所以報錯，是因為 this.form 中的 name 、 email 、 address 屬性已經有透過 v-model 綁定，如果同學使用
```
this.form ={}
```
>那麼在 Vue 看來這些屬性是消失的，因此會報錯。
如果想透過這種手動重製，應該寫成:
```
this.form = {
name:'',
email:'',
comment:'',
address:'',
tel:'',
};
```
>另外同學 this.$refs.form 之所以沒東西是因為 index.html 173 行的 <v-form> 沒有綁上 ref="form " 哩，有補上 ref="form" 後
```
this.$refs.form.resetForm()
```
>就能夠使用哩，助教也會比較建議使用這個方法，來做清除表單的動作喔。
>
---
6.Erica :
謝謝助教，有看到回覆了
把 v-else 改成 v-show 就不會被重新渲染，清除表單就沒問題了
另外想請問助教，this.cart.carts 如果沒有加入商品的話會是空陣列
為什麼加入商品 this.cart.carts == true 會回傳 false
導致沒辦法用 this.cart.carts 來判斷購物車是否有內容
> 助教回覆：
這邊同學可以隨意建立一個字串、陣列、物件的變數，然後使用該變數去作對比: console.log(xxx==true)
都會回傳 fasle 哩，因為他們的值本來就不相同，除非同學的變數就是布林值的 true ，不然用任何變數去跟 true 作對比都會回傳 false 哩，比如這個[範例](https://codepen.io/rider159159/pen/LYWgQwZ)
>
>如果同學是想判斷購物車數量，建議改用
>`this.cart.carts.length === 0`
>這類的 length 方法來做判斷喔。
---
(這邊只能由助教編輯，問題請到 thread 上詢問)
Sign in with Wallet
Connect another wallet