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

# 6/30 線上 Slack 助教

## 今日助教輪班時間

暄雯：6/30 (三)
回覆時間：上午 9:00 - 下午 1:00

## 發問規範

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

## 注意

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

## 問題

1. **Vic**：
助教好:
請問要如何刪掉沒有 ID 的訂單，且使用付款 API 時，有回傳成功，但相對的訂單卻沒有改變付款狀態，後來有一張訂單資料成功改變狀態，但出現了沒有 ID 的訂單。附上[訂單頁程式碼](https://github.com/Hsuan777/VFitness/blob/develop/src/views/frontend/Order.vue)(178 行)，再請助教幫忙看看，謝謝。(付款後訂單未改變已解決，多了一個 } )
> 助教回覆：
> 這邊我們可以協助刪除錯誤的訂單，如果需要刪除，可以私訊 葉子 或是 Ray 助教，提供 mail 和 path，說明要刪除有錯誤新增的訂單就可以哩 :D
---
2. **kaiaChun**：
助教好，昨天有詢問 Github Pages 的問題，這是我的 Github，有在 index.js 加上箭頭函式，但輸入 https://kaiachun.github.io/PetPal/index#/ 還是無法顯示頁面
> 助教回覆：
> 這邊建議同學可以嘗試建立一個 gh-pages 的分支，將檔案部屬到上面。這邊提供教學給你參考：[Vue Cli 部署到 Github Pages](https://tzuhui.github.io/2020/03/02/Vue/Vue-CLI3-to-github-pages/)
---
3. **DioDeng**：
助教妳好～可以教我如何部署 Github 嗎？
有參考了許多方式，但部署出來的結構都跟同學長的不太一樣
有把 gitingnore 裡面的 dist 移掉
但部署上去依然沒看見該資料夾
> 助教回覆：
> 如果同學的網址沒有包含 dist/，那沒有 dist 資料夾是沒有問題的哦
> 不太確定同學部屬的方法及結果如何，建議可以提供 Github 連結讓我們檢視，以及希望呈現的結構範例，這樣我們比較好知道問題出在哪裡～
> 這邊也提供不同的教學資源給同學參考：
> [Github Pages - 免費網頁空間隨你開](https://youtu.be/njlABvVRB68?t=2716)
> [Vue Cli 部署到 Github Pages](https://tzuhui.github.io/2020/03/02/Vue/Vue-CLI3-to-github-pages/)
> [一個指令快速部署 Vue Cli 到 GitHub Pages](https://hsiangfeng.github.io/vue/20200214/1055437216/)

---
4. **John G**：
助教好:
請問一下我再 npm run serve 的時候 發生了問題 ，請問是我的 main.scss 載入路徑錯誤嗎？
https://github.com/johnchan822/taiwantravel-
> 助教回覆：
> 對哦，路徑載入錯誤了，[這一行](https://github.com/johnchan822/taiwantravel-/blob/master/src/App.vue#L6) 改為 @import './assets/stylesheets/main.scss'; 就可以了～
> 因為 App.vue 和 assets 資料夾是同一個階層，所以不能用 ../ 路徑

---
5. **Iven**：
助教好：
這是我的 [程式碼](https://github.com/Iven10252158/final_project)，想請問助教，在我的產品列表的地方有一個搜尋的功能，目前的情況是，我可以依據左邊的選單，找到對應的資料，但是我希望做的功能是，假設當我在新手登山的類別裡，搜尋玉山，而玉山的類別是在中階登山裡，我希望當我跨類別搜尋到東西時，旁邊的選單高亮會消失，想請助教給我一點方向讓我做出這個效果，也想請助教幫我檢查一下程式碼，在 products.vue 的檔案裡面，有一個 searchProduct 的方法，想請助教幫我檢查一下這部分的程式碼有沒有需要修改的地方，謝謝助教。
> 助教回覆：
> 選單高亮的部分，因為是綁定 productValue 的值，可以嘗試在搜尋時修改 productValue 的值就可以了
> 程式碼的部分，else if 這段看起來是可以不用寫的～
---
6. **Wel**：
助教你好：
想請問助教第七週範例，他的 Nav 點擊產品時會出現這個白字的樣式，想請問樣式是怎麼出來的呢？
> 助教回覆：
> 這邊是 Bootstrap 的 JS 語法，點擊產品或其他選單項目時就會被套用 .active 樣式
---
7. **小妤**：
老師您好，這是我的 [code](https://github.com/peggyted0129/vue3_hex_0625/blob/master/src/views/front/OrderBuying.vue)。在 src/views/front/OrderBuying.vue 頁面 (46 行) 表單驗證部分使用了 schema 寫法， 其中 "手機" 錯誤驗證訊息套用了 (191 行) isPhone 方法沒有效果，應該是(125 行)寫法有錯.....，看了官網還是不知道如何修正，請老師解答??
> 助教回覆：
> 文檔裡面有提到哦，在 [這裡](https://vee-validate.logaretm.com/v4/guide/global-validators#vee-validaterules) 有提到可以設定 defineRule　來定義驗證規則
> 將 defineRule 載入後，在 created () 設定 defineRule('isPhone', this.isPhone) 就可以了～
> 建議同學在使用外部套件遇到問題時，可以先仔細翻一下文檔，很多解決方法裡面都會有提到哩，如果是看不太懂的地方可以說明是哪一段比較不清楚它的用法，這樣我們也比較容易縮小問題的範圍～
---
8. **DioDeng**：
https://github.com/ZweigDen/jimnyschool
助教你給的部署方法 3 個都嘗試過了
我不清楚部署成功的資料結構是如何？
1. 一鍵部署 - 單純 dist，沒有 src 等資料夾讓助教老師檢視作業，開啟頁面也沒有畫面（控制台有沒看到錯誤訊息）
2. Ray 助教的舊部署，可以看到 src 等資料夾，但就是沒有 dist(網頁一樣是空白)
3. 使用 github desktop 程式部署，部署上傳有出現 dist 資料夾，但嘗試開啟頁面 也是空白
這三個方法都有補上 vue.config.js 了

我成功部署了，但目前卡在這個畫面，看了影片教學是說路徑問題，但 vue3 版本不知道該去哪邊修改
> 助教回覆：
> 如果是路徑問題，Vue3 版本的路徑設定會放在 vue.config.js 這個檔案裡。可以參考這篇說明：[配置参考](https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE)
影片中提到的 assetsPublicPath 對應的是此檔案中的 publicPath 屬性
如果修改後還是有問題，建議同學也可以附上 Github pages 的連結給我們檢視，謝謝～
補充：
router/index.js 的 component 寫法有誤，要改成箭頭函式
例如：第 7 行要修改為 component: () => import('../views/Home.vue'),
---
9. **leo naruhodou**：
助教好，想發問釐清一些觀念
以下兩個第七周的範例程式碼頁面
[OrderModal.vue](https://github.com/hexschool/live-vue3-dashboard/blob/main/src/components/OrderModal.vue)
以及
[DelModal.vue](https://github.com/hexschool/live-vue3-dashboard/blob/main/src/components/DelModal.vue)
在 OrderModal.vue 的第 160 行中
有加入 emits: ['update-product']
但在 DelModal.vue 當中
卻沒有加入
emits:[]
這邊要怎麼判斷什麼時候應該加入呢:流汗:
總覺得有些地方有，有些地方沒有，頭好混亂
> 助教回覆：
> 基本上如果有使用 emit 就要加上 emits:[] 哦，範例的 DelModal.vue 有補上 emits:[] 了～
---
10. **Iven**：
助教好：
我的 vue cli 今天關掉再重啟都會出現這個錯誤，雖然說照他的步驟，npm rebuild node-sass 就可以正常運作，但是每次關掉重啟都會這樣，想問一下助教為什麼會這樣？
> 助教回覆：
> 建議同學可以試著把 node-sass 解除安裝後再重新安裝看看：
npm uninstall node-sass
npm install node-sass
npm rebuild node-sass
如果還是有相同的狀況，再麻煩同學附上 Github 的連結，方便我們檢視問題哩，感謝～
>
>（同學事後回報有可能是 node_modules 更新問題，重新下載 / 更新 node_modules 資料夾後就沒有再出現稍早的錯誤了）
---
11. **leo naruhodou**：
助教好，
想請問關於 vue cli 產生的網站的 OGP 的問題
以下是 3 個主流 SNS 的測試模式
facebook
https://developers.facebook.com/tools/debug/
twitter
https://cards-dev.twitter.com/validator
line
https://poker.line.naver.jp/
現階段我已經將 OGP 寫死在 public>index.html 的 meta 上
並在頁面上確認到（可參考附圖）
https://overactive1988.github.io/HexSchool_vue_lesson2021/week08/ogp.jpg
[頁面網址](https://overactive1988.github.io/HexSchool_vue_lesson2021/week08/#/)
目前只確認到 FB 可以正常顯示 OGP 以及設定的內容（附圖 2）
而 twitter 與 line 都會跳出錯誤（可參照上面提供的檢測工具）
LINE 回報的錯誤是

TWITTER 回報的錯誤是

The card for your website will look a little something like this!
Unable to render Card preview
INFO: Page fetched successfully
INFO: 8 metatags were found
ERROR: No card found (Card error)

    這邊想請問在 Vue Cli 的環境中
    要如何才能像一般網站那樣，設定了 OGP 也能正常顯示呢？
> 助教回覆： 
> 目前測試 twitter 顯示沒有問題，同學可以再嘗試看看
Line 的部分，同學可以試著在 main.js 補上這段程式碼：

new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');

---
12. **蔡皓全**：
助教好，
    1. 我想請問為甚麼我在 login 介面登入成功進到後台後，又會跳回 login 介面，要再登入第 2 次後才會正常不會跳回 login 介面。
    2. 在我後台的 Sidebar 有 Product 跟 Coupon 兩個選單是用來切換兩個元件的，如果我想在切換到甚麼元件就讓那個選單加上有 active 的效果可以用甚麼方法寫呢。
    
    [Github](https://github.com/DavidTsai-whole/vuecli3)  謝謝
> 助教回覆： 
> 1. 登入介面有使用 form 標籤，建議改為在 form 標籤設定 @submit.prevent="goToAdmin"
> 2. 可以在 data 設定一個物件，例如：pageName，active 樣式則根據 pageName 的值來決定
---
13. **leo naruhodou**：
助教好，關於 OGP 在 Line 上顯示的問題，還是沒辦法得到解答 qq
這裡是 [我的專案的 main.js](https://github.com/overactive1988/vue_lesson8_homework/blob/master/src/main.js)
如果想加上助教提到的程式碼

new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');

    具體應該如何整合才會是正確的呢...?
> 助教回覆： 
> 這邊修改了一下程式碼，在 main.js 最後加上這段就可以了：

new App({
render: h => h(App)
}).$mount('#app')

---

(這邊只能由助教編輯，問題請到 thread 上詢問)