---
tags: Vue 直播班 - 2021 夏季班
---
# 6/25 線上 Slack 助教
## 今日助教輪班時間
Ryder：6/25 (五)
回覆時間：早上 9:00 -下午 1:00
## 發問規範
老師助教同學們好，**這是我的 Codepen**，我**原本預期**「JS 第 8 行會出現數字 8」，**但卻出現**「預期外的結果是 0」，想問下問題出在哪裡？
## 注意
1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. 以下問題區塊只能由助教自行增加
5. 助教會將回覆寫在下方問題區塊
## 問題
1. Chiayu：
助教你好
附上我的[程式碼](https://github.com/chiayutsai/RingRing/blob/main/src/components/ArticleForm.vue)
在第122行有嘗試加入文字編輯器
main.js也有依照文件指示引入相關套件
但在[頁面上](https://chiayutsai.github.io/RingRing/dist/#/dashboard/newArticle)會跳以下錯誤無法正確顯示文字編輯器
請問是什麼原因呢～？
再麻煩助教了謝謝！！
> 助教回覆：
> 這邊是因為
```
editor: ClassicEditor,
editorConfig: {
toolbar: ['heading', 'typing', 'bold', 'italic', '|', 'link'],
},
```
> 這段 code 同學放在 props 中，將這段 code 調整到 data() 中就能使用哩。
---
2.金金
https://github.com/vezona/Sweet_Home_Vue3_Project/blob/main/src/components/editModal.vue
想請問我在119行已經把props的資料賦予在tempProduct變數上了，但Modal template還是取不到值，卡了好就不知道為什麼><再麻煩助教協助看看，謝謝！
> 助教回覆：
> 這邊 props 設定都沒有問題哩，之所以 `this.temProduct` 會沒有資料，是因為 watch 監控錯目標哩，會需要將 editModal.vue 的
```
watch: {
temProduct () {
this.temProduct = this.temp
}
},
```
>調整成
```
watch: {
temp () {
this.temProduct = this.temp
}
},
```
>這樣 modal 就有正確資料哩。
由於 watch 功能是監控某個值，當值做改變時就會執行裡面方法，因此 watch 要監控的會是同學設定的 props 喔。
---
3.J ack :
助教好，我的專案上傳了之後，檔案無法上傳上去，但是我的Githubpages卻是可以正常打開,想請問該怎麼解決
https://github.com/lj787448952/jacksix
> 助教回覆：
目前看 GitHubPages 確實有正確開啟，目前不清楚同學提到的 『檔案無法上傳上去』，是指專案更新後想要更新至 GitHub 卻沒辦法嗎？
如果是的話會需要使用 Git 指令來做更新動作喔：
以下是更新的 Git 指令：
```
git add .
git commit -m "修改內容"
git push
```
>如果助教這邊理解有錯，還麻煩同學詳細說明狀況，助教會在補充喔。
---
4.Stacey Huang
Ryder助教你好
[Ray助教的作業範例](https://github.com/hexschool/live-vue3-dashboard/blob/main/src/views/Orders.vue)
在Ray助教所提供的範例,Orders.vue中的line35 @change="updatePaid(item)",不是很懂為什麼是要使用change事件呢? 我一開始使用click事件,雖然有正確修改為付款狀態但一下子又回復到原本的狀態。是因為表單input需要使用change事件來監聽它們的變化嗎? 在麻煩助教了,謝謝!
> 助教回覆：
這個解釋稍微複雜一點，當我們使用 `type="checkbox"` 搭配 @click 事件時，當我們點擊當下看似事件有觸發並切換 checkbox 狀態，但因為 執行@click 事件，因此並不會真正讓 `type="checkbox"` 綁定的 v-modle 做出真正的資料改變，詳細可參考[這篇文章。](https://stackoverflow.com/questions/50506235/vuejs-click-event-from-checkbox/50506564)
較為簡單的解釋：當我們使用 `type="checkbox"` 若要綁定事件效果，就必須選擇 `＠change` 事件來做搭配哩
---
5.小妤
Ryder助教你好，今天我問的 postcars 加入購物車的部分，依照您的回覆還是無法正確加入購物車，不知道是不是 "非同步" 寫太多亂掉了還是怎樣....，一直 debug 很久都找不出問題點，請您在幫我看下好嗎 ?? [ code](https://github.com/peggyted0129/vue3_hex_0625) 、 [page](https://peggyted0129.github.io/vue3_hex_0625/#/backstage/shopping) 、 [果然是非同步的關係](https://upload.cc/i1/2021/06/25/TGCuPy.png)。 請您在後台幫我檢視 src/views/back/BackShopping.vue ( 116 行的 postcars( ) 這段 ) 。 有在想...，沒有達到預期是否是被 "非同步" 影響，有考慮使用 try、catch 或 async/await 用法，但語法又不熟 = =" 請老師使用 try、catch 或 async/await 寫法改寫 postcars 這段借我參考好嗎:pray:
老師您好，今早嘗試又改寫了 [code](https://github.com/peggyted0129/vue3_hex_0625/blob/master/src/views/back/BackShopping.vue#L325) (已在樓上有提問了~)。在 src/views/back/BackShopping.vue 頁 (343-388行是原先寫法，有非同步的問題，無法正確寫入購物車)...。 改寫 code 在 (293-341行)，搞不清楚執行完第一次非同步 .then 後、使用 return 要串接下一個 axios 寫法是否正確....，有把步驟拆分，但是卡在 ( 325-328 這段 ) 清空 session 購物車的 delSessionCart() 無法正確執行...，請老師幫我看下問題出在哪裡 .... ??? 另外，有在網路上尋找 async/await 寫法，通常都只有串接一項 axios，如果像我那麼多個 axios 要跑，請問該如何撰寫呢 ?? ( 目前只使用最原始的方式，但還是想了解如果是多項 axios 該如何撰寫才會使他們能照步驟執行 )
src/views/back/BackShopping.vue:325
> 我是卡斯伯老師：這段寫法可以再簡化，
> 1. 正確來說，**這邊要使用 return 進行串接，可以參考課前的 Promise 教學**，如果 Promise 不熟悉的情況，不建議使用 async/await
> 2. 購物車的品項可以使用「刪除全部購物車」的 API 清除
> 3. 多個品項加入購物車，可以使用 Promise.all 的方法
> 方法參考：https://wcc723.github.io/development/2020/02/16/all-new-promise/#Promise-all
---
6.DioDeng
助教你好～我在部署github時，有將.gitignore內的dist移除了，但部署上去後依然沒有出現dist這個資料夾，Ray助教的兩種方法都試過了，最後有參考老師的youtube但自己的資料夾內沒有config可以修改
> 助教回覆：
> 這邊麻煩請同學附上相關專案，以及同學相關操作方法，助教才會比較清楚目前同學專案狀況喔。
另外同學提到的 config 是指 vue.config.js？
是的話，當專案沒有 vue.config.js 是可以自己新增的。
---
7.蔡皓全
助教好，我想請問我在admin資料夾裡面的Products.vue元件裡面加上42、47 、61行後就會出現錯誤請問 是為甚麼?
https://github.com/DavidTsai-whole/vuecli3
> 助教回覆：
助教這邊測試開啟後確實會噴錯，不過將 Products.vue 60 行的 Pagination 後方補上逗號後就能使用哩，這邊還請同學確認一下是否是這個問題喔。
```
components: {
ProductModal,
Pagination,
DelModal
},
```
---
(這邊只能由助教編輯，問題請到 thread 上詢問)
Sign in with Wallet
Connect another wallet