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

# 6/21 線上 Slack 助教

## 今日助教輪班時間

SONYKO：6/21 (一)
回覆時間：下午 2:00 -下午 6:00

## 發問規範

老師助教同學們好，**這是我的 Codepen**，我**原本預期**「JS 第 8 行會出現數字 8」，**但卻出現**「預期外的結果是 0」，想問下問題出在哪裡？

## 注意

1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. 以下問題區塊只能由助教自行增加
5. 助教會將回覆寫在下方問題區塊

## 問題

<font color="#f97095">🐑 　這邊只能由助教編輯，問題請到 thread 上詢問　🐑 </font>

**1. Iven**<font color="#aaa">
助教好，我想透過選單的方式來篩選資料，我篩選資料後畫面都沒有更動，有點不知道該怎麼修改，這是我的github再麻煩助教給我一些指導
</font>
>助教回覆：
> 
>
>關於 this 的指向、建議同學把 this 統一先宣告 vm 來替換，不然 filter 有使用箭頭函式， 有時候會跳錯。
>這邊會無法篩選是因為 vm.category.type 永遠會得到 true ，因此不會去跑 else 的篩選流程。
>同學可以試著加上 console.log(vm.category.type) 並去操作看看選單研究看看。
---
**2. Alicia Lo**<font color="#aaa">
SONYKO助教您好，我在部署Vue cli檔案到github page遇到一些問題。目前已上傳到github空間，但打開console會出現如截圖的紅字。已有根據教學影片修正路徑為/test/dist，但畫面卻還是沒有如預期顯示出來，打開console還是跑出截圖的紅字。嘗試過重新砍掉原dist檔重新build再上傳，也還是會出現一樣的問題。[這是我的github網址](https://github.com/Huchan1124/test)，需要再麻煩助教協助解惑了，謝謝助教
</font>
>助教回覆
>vue.config.js 這邊的 publicPath 只要加上 /test/ 唷
>另外 bulid 完之後要將 dist 的內容 push 至 gh-pages 這個分支， 同學目前好像都放在 main （這個部分老師第八週會再跟同學講解～）
>另外 404 那個錯誤是因為 build 出來的路徑不對所造成的， 老師的影片中有提到[路徑相關問題](https://youtu.be/njlABvVRB68?t=3268)，可以參考看看。
>可以試著有改看看， 有問題再提出唷～

---
**3. Echo Hui** <font color="#aaa">
老師助教你好，這是我的程式碼
https://github.com/echohuiecho/Vue-hexschool-week6_VueCLI</font>
**問題1:**<font color="#aaa">
在後台產品頁面功能裡，當我先按編輯產品按鈕打開Modal，關掉Modal，然後再按新增產品的按鈕開啟Modal，就會報錯。但如果我重整頁面，只按新增產品的按鈕開啟Modal，或只按編輯產品按鈕，就不會報錯。請問是那裡出錯呢?
Error message 如下:
Unhandled error during execution of scheduler flush
Uncaught (in promise) TypeError: Cannot convert a Symbol value to a string
Uncaught (in promise) TypeError: Cannot read property 'emitsOptions' of null
補充一下，我花了半天研究，發現應該是我打開編輯產品之後this.temp會有資料，按下新增產品的按鈕我會把this.temp清空，這個位置出現錯誤。只要我把this.temp... 這段拿掉，就不會報錯。
如果要正確把功能做出來，請問要怎樣改動程式碼呢? </font>

**問題2:**<font color="#aaa">
取得訂單列表中，我想要把"create_at": 1523539834，的值轉換成日期格式，
我嘗試用 toLocaleDateString 的方法去轉換，但如1623987202得到的結果是1/20/1970，請問應該用甚麼方法去轉換格式呢?
const str = new Date(this.orders[0].create_at).toLocaleDateString('en-US');
謝謝助教 </font>
>助教回覆
>問題一：
同學可以試著反過來寫，不應該是打開新增產品時將編輯清空，而是打開編輯產品時去抓取相對應的產品渲染至表單內。 新增產品會是空白的表格。這邊同學可以試著改寫看看

>⭐️助教長補充：　
問題是同學在編輯和新增的 Modal 打開時都是去觸發 openModal，但新增和編輯的邏輯不同，在助教範例中有使用 isNew 去判別是新增還是編輯才去做相對應的動作， 新增時是不需要做深拷貝的， 且 temp 是空的也無法轉才會出現錯誤。

>問題二：
時間轉換的部分需要 *1000 再做轉換才會是正確的時間唷。

>⭐️助教長補充：
>```
>new >Date(this.orders[0].create_at*1000).toLocaleDateSt>ring('en-US');
>```
---
**4. moitw** <font color="#aaa">
助教好，這是我的 github 還有 github pages
在後台的部份 產品列表一直出不來，pnm run serve 沒出現錯誤，但是在瀏覽器頁面的console 也沒有出現問題，檢查 build c後的 html 發現 <tbody>這段沒出現內容，在生命週期 mounted () 時執行 this.getProducts() 但似乎沒有反應，想知道該從哪裡查找問題…
</font>
> 助教回覆：
> 同學好。 同學的問題是在於不小心把 mounted 和 created 都寫在 methods 裡面了。 移出來就正常了喔 ！

---
**5. Jessie Cheng** <font color="#aaa">
助教您好
**問題一：**
這是我的 [GitHub](https://github.com/JessieMosbi/vue-hex-cli-project) 跟 [GitHub pages](https://jessiemosbi.github.io/vue-hex-cli-project/dist/#)
想詢問後台的問題，後台登入後，點選上方「訂單」進入到訂單頁面
會一直噴 Error：Uncaught (in promise) TypeError: Cannot read property 'name' of undefined
錯誤應該是 OrderModal.vue 的 template 在渲染的時候找不到 order.user. name
但是已經有從外層用 props 的方式送 order 資料進來了... 不知道是哪裡出了問題呢（進度卡了好久還是上來求救了 QQ）
另外在 Order.vue line #117-#124 想詢問一下執行順序的問題，原本預期是 OrderModal 的 watch 會先執行，再來是 OrderModal 的 openModal()，結果相反......猜想應該是非同步的關係所以順序不一定？

**問題二：**
這是我的 [GitHub](https://github.com/JessieMosbi/vue-hex-cli-project) 跟 [GitHub pages](https://jessiemosbi.github.io/vue-hex-cli-project/dist/#)
有在後台 ProductModal.vue 加了 vee-validation，但是會噴 Error: Uncaught (in promise) TypeError: Cannot convert a Symbol value to a string
查了一下好像是 props 傳進來的不能修改就會報此錯
this.product = { ...this.tempProduct }，不過已經有把 props 傳進來的以解構方式接到自己的 product 底下
感覺跟上個問題的原因有點類似......但還是想上來詢問一下，不知道問題點出在哪呢 QQ？ </font>
> 助教回覆：
> 同學的專案運行起來會當機 OAQQQQ
> 助教和助教長們進行測試了， 只要進入 login 就會直接當掉， 另外同學的 .env 檔不見了，所以 loading 效果不會消失。
> 助教長協助查看之下， 從描述來看、解法應該是只要在 order.user.name 這個父層加上 v-if="order.user" 就可以解決。原因是因為雖然 Modal 沒有打開， 但 Modal 確實已經被註冊及渲染， 所以 order.user 是 undefined 再去取 name 的話就會出錯。
>
> 若要協助同學進一步的 debug 可能要先麻煩同學先將登入會當掉的部分修掉了嗚嗚。

---
**6. Jordan_Tseng**
助教好，想請教VeeValidate，想設定圖片是必填的話input可以改成什麼呢？
> 助教回覆：
> Ray 助教長有協助測試，
> 由於 Field 是元件， 因此是不能夠直接 ref 取到的， 為了解決這個問題， 本身 Field 是支援 slot 所以可以這樣改
> ```
> <Field name="求職照片">
> <input
> id="costumerInfoPersonalImg"
> type="file"
> class="form-control"
> :class="{ 'is-invalid': errors['求職照片'] }"
> placeholder="請選擇照片上傳"
> ref="costumerInfoPersonalImg"
> />
></Field>
> ```
> 這樣就可以正確取得了
> 另外 <ErrorMessage name=“求職照片” class=“invalid-feedback”></ErrorMessage> 不可以放在外層別需放在同一層才可以。

> 我測下來不知道為什麼官方的寫法都是無效的，唯一另一種解法就是 input 上面改這樣也可以
> ```
> <input
> accept="image/*"
> type="file"
> class="form-control"
> :class="{ 'is-invalid': errors['求職照> 片'] }"
> placeholder="請選擇照片上傳"
> ref="costumerInfoPersonalImg"
> />
>```
> 主要是加上` accept="image/*"` 限制只能選擇圖片 。
>