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

# 7/7 線上 Slack 助教

## 今日助教輪班時間

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

## 發問規範

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

## 注意

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

## 問題

1. **Wendy Li**：
哈囉 助教、老師好:
想詢問關於 Swiper 的套用
目前遇到當從首頁點選 menu 到商品列表頁(任何頁面切換都會),
再返回上一頁面
會遇到 swiper 套用的區塊圖片會忽然變超大的問題...
想詢問這是甚麼原因, 要如何調整...?
[程式碼連結](https://github.com/rockayumitw/vue-week7/tree/main) | [頁面連結](https://rockayumitw.github.io/vue-week7/dist/#/home)
再麻煩助教、老師撥空確認了, 謝謝!
> 助教回覆：
> 這是非同步產生的問題哦，因為 AJAX 還沒讀取完。
> 可以嘗試將 Swiper 區塊加上 v-if，等 AJAX 結束後再出現就可以哩
>
> 這邊提供一個做法給你參考：
> 在 data 新增一個屬性：status 後，mounted 設定

setTimeout(() => {
  this.status = true;
}, 5000);

>之後在 Swiper 區塊加上 v-if="status"。這樣切換頁面後，再等五秒，畫面就會正常了～
---
2. **Jiang V**：
助教您好，這是我的 [頁面](https://viccjiang.github.io/jiangsvue3_week7/dist/#/)、[程式碼](https://github.com/viccjiang/jiangsvue3_week7)，有幾個問題很困擾，在進入首頁及進入後台時，有時會出現 interest-cohort（如圖），這個是可以忽略不處理的嗎？ 另外，在前台或後台切換各頁面的過程中（ 比如首頁點擊完後再去點關於我們，然後再點回首頁、關於我們以此類推再點擊其他頁面連結，每個頁面就會跑不出畫面 ），接著都會報錯誤（如圖），來回點擊都進不去，除非重新整理才可以再次進去當前點擊到的頁面，但不確定是哪裡出問題，請問是什麼原因造成，要如何修正？在請老師、助教協助，謝謝哩～
> 助教回覆：
> 1. interest-cohort：
> 這邊檢視是 Github 的關係，可以不用理會。可以參考這篇討論：
> [I have no idea what the interest-cohort is](https://github.community/t/i-have-no-idea-what-the-interest-cohort-is/179780)
> 2. 頁面切換問題：
> 這是非同步問題所產生的哩，因為圖片載入太慢導致 carousel 讀不到、判斷 JS 大小切換出錯。在 carousel 區塊加上 v-if 來判斷就可以囉。
> 作法可以參考第一位同學問題的答覆～
---
3. **Jiang V**：
助教，這是我的 [頁面](https://viccjiang.github.io/jiangsvue3_week7/dist/#/)、[程式碼](https://github.com/viccjiang/jiangsvue3_week7)，我還有一個問題，就是我在後台點選登出後，無法回到 login 頁面，而是跑到首頁，也是會噴以下紅字，想請問助教這要如何修正 ? 再麻煩助教指點，謝謝~
> 助教回覆：
> 有三個地方要修正：
> 1. 登出綁定的事件名稱寫錯了，是 click，不是 ckick
> 2. 在串接登出的 API 時，不需要傳送 user 資料
> 3. login 的路徑前面要再加上 /
> `this.$router.push('/login');`
---
4. **Jordan_Tseng**：
助教好，這是我的[扣](https://github.com/Jordan-TTC-Design/vue-2021-finalwork)，我想問關於router的部分，傳值傳到另外頁面一樣用 props，但在 index.js 是不是就是父傳子。像我如想在 front 頁面 header 有一個搜尋按鈕浮出一個 modal 按搜尋可以傳到後面的子路徑頁面。但是其他像是下圖首頁有個搜尋(這可能還好做一點)但像我分屬不同頁面都有一個小標籤，我想要可以按下去就搜尋相同類別物件，這樣在頁面設定上我該怎麼做好？
> 助教回覆：
> 不確定同學的意思是不是可以有一個頁面只放同類別的物件？
如果是這個，可以參考單一產品頁面的作法來製作動態路由。進到頁面後，取得所有產品資料，再依照傳進來的值，篩選資料呈現在頁面上
---
5. **小妤**：
請問老師，請問獎品到底是 90% 完賽 ?? 還是 100% 才完賽 ???
> 助教回覆：
> 90% 哦
---
6. **Yiren**：
助教好, 這是我的 [repo](https://github.com/Yiren-Liou/AboriginalShop)
在後台 admin > 父層 layout 建立一個變數， 把 <router-view> 當成元件，使用 props 、emit 讓子層 AdminProducts、 EditProduct 可以做變數值的切換，程式碼有成功執行，但會出現以下圖片中的 warning，有查到一些資料是在 eslintrc.js 加上 'inheritAttrs': false,但是加上之後還是出現相同的警告訊息。
再麻煩助教查看，謝謝助教~
> 助教回覆：
> <router-view> 可以當成元件來使用沒有問題，不過如果在 <router-view> 有使用 props，那他的子層（AdminProducts.vue、AddProduct.vue、AdminOrders.vue 等）都需要設定 props 哦。
>
>這個警告是因為在父層有設定 props，但子層沒有設定到所出現的問題哩。
除了這個作法外，同學也可以嘗試使用 具名視圖的方式，在 layout.vue 設定兩個 <router-view>，並區分為是否有使用 props
>
>使用方法可以參考 [v-router 的官方文件](https://next.router.vuejs.org/zh/api/#router-view-props)，[課程影片](https://courses.hexschool.com/courses/vue-2021/lectures/31862699) 也有提到哩
---
7. **Jordan_Tseng**：
助教，你的意思是直接透過動態路由，然後先抓那個動態路由後所產生的值，同時取得所有產品值在做比較，篩選出相同產品列表？好像也算是一個暴力解法ＸＤ我有做到一半的搜尋頁面，如果是按下職位類別標籤後直接轉到 [search](https://github.com/Jordan-TTC-Design/vue-2021-finalwork/blob/master/src/views/front/SearchList.vue) 頁面或另一個 search 頁面，並且以該職位類別做塞選。這樣會有機會嗎？還是以目前 api 的形式上可能不行？
> 助教回覆：
對，我的意思是這樣～
目前同學的做法看起來是可以的，透過取得所有資料再去做篩選。
不過實務上比較常見的是會送參數到後端，取回篩選後的資料。但目前課程中練習的 API 沒有這個參數哩
---
8. **moitw**：
助教好～
這是我的程式檔和頁面，主要問題在 coupon2 的 Modal
[程式碼](https://github.com/tsuifei/vue-galerie/tree/main/src)
[頁面](https://tsuifei.github.io/vue-galerie/dist/#/login)
在 coupon 列表點擊修改會彈出 couponModal 可以修改，正常情況按右下「確認」後資料有儲存，然後呼叫 Modal 本身的 hideModal() 方法關閉視窗，但這部份卻不起作用，想麻煩助教看是哪裡寫錯，謝謝～
> 助教回覆：
[admin/Coupons.vue 第 150 行](https://github.com/tsuifei/vue-galerie/blob/main/src/views/admin/Coupons.vue#L150) 的 success 少了一個 s
---
9. **圈圈**：
助教您好：
想詢問 api 加入購物車「當加入相同商品時會自動累加數量」，這個我能不能在我的程式碼中添加其他判斷，讓如果選擇同商品不同方案或使用日期時，不會覆蓋到上一筆資料？或是這個是 api 固定的功能無法調整
> 助教回覆：
目前後端的規則是只要同樣的 product_id 就會自動合併，如果要在加入時不自動合併，可能要麻煩同學把不同方案設為不同商品；或是在購物時提醒使用者不同日期要以不同訂單下訂
---
10. **Yi Chieh**：
助教您好，
請問取得商品列表的 API (有分頁的)，有辦法可以在點擊分類篩選的時候，也套用此 API 來產生分頁資料做出分頁功能嗎？
若是不行的話請問有什麼方法可以達成呢？
麻煩助教幫我解答，謝謝助教回覆！
> 助教回覆：
目前沒有提供這個參數可以串接，現在只能先用「取得所有商品進行篩選」，再把篩選後的資料，運用在前端分頁。
這邊也提供分頁製作的文章給你參考：[Vue 出一個女友吧!-製作分頁邏輯-1](https://hsiangfeng.github.io/vue/20190729/2401395670/)
---
11. **Iven**：
助教好：
這是我的 [程式碼](https://github.com/Iven10252158/final_project)，我的最愛的功能目前遇到幾個問題還找不到解決辦法，希望助教幫忙！
Q1 : 不管用什麼辦法，我在 Favorite.vue 的頁面 push emitter.on 來的 data 時，都會多出一個空物件，找不到問題在哪裡，希望助教幫忙檢查。
Q2 : 我的最愛的功能，新增跟移除 localStorage 都沒問題，有問題的地方在於，如果同一個品項，點一下愛心 -> 新增 再點一下 -> 移除，但是我重新整理頁面，同一筆品項又可以再儲存到 localStorage 裡面，會變成 localStorage 有重複的資料，也找不出來哪裡寫錯了。
Q3 : 新增跟移除產品的愛心高亮問題，一直會沒辦法順利運作，我真的是把所有我會的方法都試過了，但就是不能順利產生高亮。
以上三個問題，想請助教幫忙我一下，看看我到底是哪裡有問題，謝謝了！

我的想法是，我控制 Favorite.vue 打開的地方在 NavBar 的書籤上，因此我使用 mitt 的方法把在 products.vue 裡新增到 localStorage 的內容傳給 Favorite.vue，因為希望Favorite.vue 預設能跟 localStorage 的內容一樣，在 products.vue 的 mounted 有使用 **this.emitter.emit('send-favorite', this.myFavorite)** 讓 localStorage 的內容能直接傳到 Favorite.vue 裡面，在 Favorite.vue 裡面能接收到資料之後可以渲染出來，新增的品項也能夠即時渲染，我的想法是這樣的，但是實作上一直有問題產生，也不知道可以怎麼解決，Ryder 助教也有給我看之前學長姐的範例，只是我還是不知道該怎麼解決問題，希望助教幫我解答的時候也能夠告訴我，我的想法是不是正確的？謝謝助教
> 助教回覆：
> 1. Favorite.vue 第 63 - 69 行修改為以下程式碼就可以了：

this.emitter.on('send-favorite', () => {
  this.getFavorite()
})

> 2、3. 如果已經把原本的資料刪除，那再新增資料進去是沒問題的哦。這邊建議同學在傳入資料時可以改為 item.id，不用傳入整筆資料。修改後，在渲染畫面時，判斷是否有加到最愛，可以改為 myFavorite.includes(item.id)
>
>因為 Favorite.vue 開啟時，就會取得目前 myFavorite 的資料，所以 products.vue 可以不用設定 this.emitter.emit(‘send-favorite’, this.myFavorite)
---
12. **蔡皓全**：
助教好，
1. 我想請問我在 Index.vue 檔案中的 '點我前往' 按鈕中套入 hover.css 效果，但顏色卻蓋不滿是為甚麼?
2. 我使用了swiper.js 的 vue3 用法，在我 Index.vue 中的 74 ~ 97 行很像不是 vue3 的寫法要改成 vue3 的寫法要怎麼寫呢
3. 我的 githubPages 沒有用成功請問是哪裡有問題 [github](https://github.com/DavidTsai-whole/vuecli3) [github-pages](https://davidtsai-whole.github.io/vuecli3/) 謝謝
> 助教回覆：
>1. 因為 .hvr-bounce-to-right:before 預設是跟按鈕大小一樣（不包含 border），目前按鈕的寬高為 106px * 46px，hover 後的顏色區塊為 104px * 44px。
建議可以補上這些語法試看看：

    width: calc(100% + 2px);
    /* 寬度設定為父階層的寬度 + 2px（左右 border 寬度相加），讓寬度跟父階層相同 */
    height: calc(100% + 2px);
    top: -1px;
    /* 如果設定 top: 0，實際上 hover 的顏色區塊會放在按鈕 border 「內」的位置。設定 -1，則讓顏色區塊位置放在 border 上面 */
    left: -1px;

> 2. 有看到同學在第 47 行將 slidesPerView、spaceBetween 寫好了，breakpoints 的寫法也是一樣的哦。使用範例如下：

:breakpoints='{
  320: {
    slidesPerView: 2,
    spaceBetween: 20
  },
  480: {......},
}'

> 3. 目前同學的 Github Pages 網址應該是這個哦：
https://davidtsai-whole.github.io/vuecli3/dist/index.html#/
---
13. **twoz**：
老師助教同學們好，這是我的 [repo](https://github.com/twozwu/vue3-live-week7/blob/main/src/components/admin/CouponModal.vue)， [page](https://twozwu.github.io/vue3-live-week7/dist/#/admin/coupons)，我的問題是針對 coupon 做表單驗證，在加上驗證之前，連續按編輯以及新增(沒送出)都是正常的，但是我加了驗證之後，按編輯完再按新增卻會出錯，然後一樣的 code 我用助教提供的第七週範例去修改增加驗證卻沒有一樣的問題，想知道問題出在哪，感謝
> 助教回覆：
因為在 watch 的值改變時會觸發驗證，所以切換到新增優惠券時就會出現錯誤。可以嘗試在 watch coupon 加上 isNew 的判斷，當 isNew 為 true 時，清掉 this.tempCoupon 就可以了。範例如下：

if (this.isNew) {
  this.tempCoupon = {
   title: '',
  };
  this.due_date = new Date().toISOString().split('T');
} else {
  this.tempCoupon = this.coupon;
  // 將時間格式改為 YYYY-MM-DD
  const dateAndTime = new Date(this.tempCoupon.due_date * 1000).toISOString().split('T');
  // 解構賦值，從陣列中取出值，預設會取第一個["2021-06-22", "08:28:58.891Z"]
  [this.due_date] = dateAndTime;
 }

---
14. **Iven**：
助教好：
這是我的 [github](https://github.com/Iven10252158/final_project) [github pages](https://iven10252158.github.io/final_project/dist/#/)。
還有一點不理解的地方，就是我測試 push (item) ，在 Products.vue 的第 125 行，我應該是要傳入整筆資料到 localStorage 裡面，我才能在書籤裡讀到產品的 title。
我如果在 Products.vue 的第 125 行只 push (item.id)，會讓我在書籤裡只能看到產品的 id。
但是我希望的是在書籤裡可以看到的是產品的 title 或是圖片等資訊，而不是產品的 id。
愛心高亮無法使用 v-if="myFavorite.includes(item.id)“，但目前我也不曉得問題在哪邊，只是測試下來達不到我的預期，想請助教在幫一點忙，謝謝。
> 助教回覆：
前面推薦使用 push (item.id)，是想說在 Favorite.vue 可以取得產品列表資料來渲染畫面。
愛心高亮的問題，因為物件比較的關係，雖然兩個物件的屬性和值都相等，比較結果也會是 false。建議可以嘗試改用 id 來做比較
---
15. **Jordan_Tseng：**
助教抱歉，本來我這個問題剛剛是放在今天助教服務，但是想說問題是接續的，可能還是問你比較好。本來助教是建議跟單一頁面一樣形式，傳特定 id 進去，再依據 id 去篩選。因為我剛剛在嘗試做全站搜尋功能，這表示不是以一個產品作為基底，是關鍵字與其他條件，我把它帶入動態路由中，好像是可以 [成功](https://github.com/Jordan-TTC-Design/vue-2021-finalwork) 的(如下圖)～不知道這樣是否正確？不過感覺好像滿限制特定功能的，一般是加判斷式給每一個不同設定條件，預設帶入值給動態路由嗎？想問有看到這 [影片](https://courses.hexschool.com/courses/vue-2021/lectures/31862725)，是說大部分是用我現在做的這種動態路由？那哪種情況會用到影片提到的？
> 助教回覆：
使用動態路由來操作是沒有問題的～
另外，比較常見的作法會是透過網址參數來處理，參數部分會使用 & 來串接。
例如： `/search?keyword=${text}&category=${value}`
>
>這邊提供網址參數的文件給你參考：[Function mode](https://router.vuejs.org/guide/essentials/passing-props.html#function-mode
)
網址參數可以透過 route.query.參數 來取得值，取值後一樣帶入搜尋就可以了。使用方法跟同學目前的寫法很相似
>
>另外，網址參數可以帶入 key 和 value，網址看起來也會較動態路由乾淨。
例如：`search?keyword=text&category=frontend` 這段寫在動態路由會變成 `search/text&fronte`
如果搜尋時帶入更多值，落差就會更大。另外，做為路由的話，可能會遇到一些特殊符號之類的錯誤，導致無法進入頁面。而網址參數即使有錯誤，可能會造成搜尋缺少條件，但不會影響到進入頁面
---

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