---
tags: Vue 直播班 - 2022 冬季班
---

# 加碼直播

時間：3/17 20:00 開始

## 提醒：

- 作品發表會：[連結](https://rpg.hexschool.com/training/33/show?embed=https://docs.google.com/spreadsheets/d/1gGQHzei6yh2XDA_IfxfxsLiifTEnRv9p6lmLseIuzLc/edit#gid=982233007)
- 所有繳交期限 3/22
- **最終延長繳交條件**：3/22 前完整繳交（沒有被直接退件），可延長批改至 4/16
- 直接退件的原因：
- 助教下載後，`npm run dev` 無法運行
- 作品不完整（作品內容有缺、有大量假字）

## 加碼直播問題申請規則

請參考下方範例，詳細描述需求。

#### 範例

- [ ] 卡斯伯：我想引入 Swiper
<details>
描述：我希望引入 vue-swiper，但怎麼用都是失敗的

- 預期加入的路徑：`/`（我想要加在首頁上）
- 預期加入的檔案：`HomeView.vue`
- 有問題的行數：30~32 行
- 我的儲存庫：https://github.com/hexschool/live-vue3-dashboard-vite
- 我的 GitHub Pages：https://www.casper.tw/
...& 完整的圖示說明
</details>
- [ ] 卡斯伯：畫面上的問題（僅需要附上 GitHub Pages
<details>
描述：目前的畫面中按鈕，該使用藍色，還是綠色呢？

- 我的 GitHub Pages（請帶上有問題的畫面連結）：https://www.casper.tw/
...& 完整的圖示說明
</details>

## 常見問題？

Q: 有提問就一定會有解答嗎？
不是的，直播會從 20:00 開始，預期到 22:30，為了確保有效率的解出最多人有幫助的內容，所以選擇問題上會按照以下的方式篩選：
1. 以前台為主，對於整個作品呈現是有幫助的（後台問題不太會回覆
2. 預期這個問題是符合大多人需求的（冷門的需求容易被略過
3. 設計問題（很多人有類似的問題

Q: 哪類型問題容易被略過？

- 不符合作品、專題 “展示” 預期的（第三方登入、多國語系
- 問題不明確
- 儲存庫下載後無法運作
- 太難惹，老師一直卡住 (Q@Q)

Q: 介紹會按照順序嗎？
不會，還是與相關性有關喔。
所以請別把本次額外的直播當作救命丹，請還是持續製作您的個人作品

## 發問區

- [x] 卡斯伯：我想引入...
<details>
描述：我希望引入

- 預期加入的路徑：`/`
- 預期加入的檔案：``
- 有問題的行數： 行
- 我的儲存庫：
- 我的 GitHub Pages：
...& 完整的圖示說明
</details>

- [x] 出事了阿伯#9923：我想更改購物車數量的問題
<details>
描述：我希望在購物車頁面，在加減數量的時候，能夠快速地加減，然後再一次送出更改好的數量給API做更改，而不是像現在這樣，增減一次就戳一次API。

- 預期加入的路徑：購物車頁面 `src/views/front/CartView.vue`
- 預期加入的檔案：購物車邏輯 `src/stores/cart.js`
- 有問題的行數： cart.js 23 ~ 45 行
- 我的儲存庫： [repositories](https://github.com/LaiZhiQun/shrimpMap.git) (分支請選擇main)
- 我的 GitHub Pages： [GitHub Pages](https://laizhiqun.github.io/shrimpMap/#/)
</details>

- [x] Kimi #9564：表單中的時間格式設計與轉換
<details>
描述：
(前台也有時間轉換問題，但我主要產生疑問的地方是發生在後台)第七週任務在優惠券和文章管理的表單Modal中，會有要輸入時間的欄位。知道時間格式會需要轉換，像是頁面所顯示的值，以及實際上放入data要打api的值，兩者有所不同，但不清楚背後運作的原理和過程。
以優惠券為例，想問CouponModal.vue第81-91行的程式碼運作與為什麼這樣設計。

[優惠券管理主頁面](https://github.com/hexschool/live-vue3-dashboard-vite/blob/main/src/views/Coupons.vue)
[優惠券Modal](https://github.com/hexschool/live-vue3-dashboard-vite/blob/main/src/components/CouponModal.vue)

完整作業範本
[repo](https://github.com/hexschool/live-vue3-dashboard-vite)
[Pages](https://hexschool.github.io/live-vue3-dashboard-vite/#/)
</details>

- [x] Rena#6249：頁面內容切換相關問題(內含兩個類似的問題)
<details>
相關問題1 描述：目前是透過監聽了路由 (topic : this.$route.params.resTopic)，當路由切換時，重新撈取 topicsResData。
想問為什麼我在本機，從首頁到列表頁可以正常渲染，但從同樣的列表頁做切換時，內容不會更新。但是，在 github page 上卻都可以順利切換內容?

- 所在檔案：ResourceListView.vue
- 我的儲存庫 : https://github.com/aureate0116/VueProjectLR
- Pages: https://aureate0116.github.io/VueProjectLR/#/resource-list/JavaScript
- 圖片

相關問題2 描述 :
- (1) 在重新整理單一項目時，左邊的「相關資源」有時候會顯示、有時候不會。
- (2) 點擊「相關資源」項目，網址 id 會變，但內容不會變 (如圖)
- 所在檔案 : ResourceView.vue
- 我的儲存庫 :https://github.com/aureate0116/VueProjectLR
- Pages : https://aureate0116.github.io/VueProjectLR/#/resource/5
- 圖片:品項 JavaScript基本功修… id為9 

</details>

- [x] 法希娜#3206：前台=> 我想問router-link元件css的hover效果
<details>
描述：
- 預期看見的效果：『看商品』按鈕hover過去要跟隔壁的『加購物車』一樣變成白色的字，粉色背景

- 嘗試過的方法：chatGPT建議在router-link直接加上class套用，除了在scss加了兩層class選擇，也在該.vue檔案中的<style></style>中試過套用該class，一樣字沒有變成白色

- 有問題的行數： src/views/front/ProductsView.vue 17 行的router-link元件，scss是在_products.scss中

- 我的儲存庫：

[repositories](https://github.com/Facinalin/cardPool-Vite-Airbnb/tree/production)

- 我的 GitHub Pages： [GitHub Pages](https://facinalin.github.io/cardPool-Vite-Airbnb/#/products)
</details>

- [x] 小白#2406：RouterLink 的 active 樣式如何設定？
<details>
描述：在 navbar 【常見問題】連結使用 RouterLink 錨點定位，每當頁面停留在首頁任何地方，【常見問題】都會顯示 active 狀態，我是希望頁面停在【常見問題】區塊，才顯示 active 狀態。目前查詢到的 RouterLink 相關的 class 設定為 router-link-active 與 router-link-exact-active，但不知道如何設定？目前是依照網路上的建議，加上```exact-active-class="exact-active"```，變成無論有沒有啟用，都不會顯示 active 狀態，另外，footer 的 RouterLink 也有同樣的問題

- 路徑：`src/views/frontend/FrontLayout.vue`
- 有問題的行數： 第 36 行、第 91-103 行
- 我的儲存庫：https://github.com/wanghsiuyu/vue3-QA/blob/c187c1475a2b0b55752db2b6ba05ace92327ebfd/src/views/frontend/FrontLayout.vue#L36
- 我的 GitHub Pages：https://wanghsiuyu.github.io/vue3-QA/#/
- 圖示說明：圖中是沒加上```exact-active-class="exact-active"```的結果，只要在首頁，還沒定位到【常見問題】，就會變 active 狀態
下面的 footer 也是同樣情形

</details>
- [x] 小白#2406：產品分類的頁面切換，不使用 RouterLink 的方法
<details>
描述：產品分類的頁面切換，如果不使用 RouterLink 的話，可以怎麼寫？目前我是用 bootstrap 的 navtabs 去切換，但想知道怎麼寫比較好？是用 CSS 的 display:none 去切換嗎？

- 路徑：`src/views/frontend/ProductsView.vue`
- 我的儲存庫：https://github.com/wanghsiuyu/vue3-QA/blob/c187c1475a2b0b55752db2b6ba05ace92327ebfd/src/views/frontend/ProductsView.vue#L24
- 我的 GitHub Pages：https://wanghsiuyu.github.io/2023-vue3-GoodVegan/#/products

</details>

- [ ] DIO大人#4776：RouterLink 的 active 設定以及產品頁畫面設計
<details>

- 預期加入的路徑：`src/views/front/ProductsView.vue`
- 在products內使用routerlink,全部都會加上active樣式,想問老師要怎麼設定
<router-link :to=””{ query:{}category:item , page:1 } ></router-link>這一段
- 有問題的行數： 第 57-64 行
- 產品頁感覺自己設計的怪怪的,但又不知道該調整哪裡?想請問老師有甚麼建議
- 我的儲存庫：https://github.com/Oscar-2283/headphone/blob/main/src/views/front/ProductsView.vue#L57
- 我的 GitHub Pages：https://oscar-2283.github.io/headphone/#/products?page=1

</details>