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

# 7/2 線上 Slack 助教

## 今日助教輪班時間

Ryder：7/2 (五)
回覆時間：早上 9:00 -下午 1:00

## 發問規範

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

## 注意

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

## 問題

1. Iven ：
助教好：
這是[我的程式碼](https://github.com/Iven10252158/final_project)，我後台的產品列表，登入過後，再重新整理都會跑出，驗證錯誤請重新登入的錯誤訊息，但是我看cookie都還在，不理解為什麼這樣，也找不出來哪裡寫錯，想請助教幫我檢查一下，謝謝。

> 助教回覆：
> - 同學程式碼發生這狀況是正常的喔，因為後台 API 要能正確使用，都會需要經過執行 Admin.vue 這段程式碼才會能正確執行。

this.$http.defaults.headers.common.Authorization = token

> - 如果還沒執行上段 code 就會出現同學說的『驗證錯誤』
> - 因此同學這邊可以把 Admin.vue 的 checkLogin 改在 created() 就觸發。
> - 而後台商品、優惠券的 getProducts() getCouponsList() 則都使用 mounted() 觸發。
> - 因為 created() 會比 mounted() 早觸發，因此這樣調整後就不會有問題囉。
>
---

2.圈圈

助教好：我想做產品重新排序，讓使用者可以在前台點選價格從大排到小時，所有產品由大排到小後顯示（ 196 - 208 行 productArrangment() 的部分）。本來想操控 totalProducts 陣列，但連接畫面的是單頁的 api （products 陣列），不知道該怎麼處理這塊？是否方便提示我一個大方向呢？（突然想到，是不是也是應用 computed 就可以）
[這是我的程式碼](https://github.com/vvvvvvii/tasteof/blob/main/src/views/ProductList.vue)
謝謝！

> 助教回覆：
> - 因為目前 API 沒有支援排序功能，會建議同學想要製作商品排序功能直接使用獲得全部商品的 API (totalProducts)，並放棄頁面的商品 API (products)，接者再對 totalProducts 使用 sort 排序
> - 同學這邊提到的 computed 也是一個方法喔，主要就使用 sort 去改變全部商品排序。
> - 還有一點要提醒同學的是使用 獲得全部商品 就無法使用目前 API 回傳的 pagination 資料囉（因為 API 不支援），pagination 會需要自行設計

>- pagination 相關邏輯、設定可參考下面文章：
> - https://hsiangfeng.github.io/vue/20190729/2401395670/
> - https://hsiangfeng.github.io/javascript/20190505/1432256317/
> - Erica 同學[專案中](https://github.com/ericacadu/panya/blob/master/src/scripts/methods.js#L44)有做出類似功能，同學可以參考看看。

---
3. 圈圈
不好意思，還想再問一題。我用 computed 製作搜尋欄篩選產品（ 238 行開始的 filterProduct ）。有成功運作，但發現頁碼的 total_pages 不會跟著變動減少。不懂為什麼？

> 助教回覆：
> - 這邊看 pagination 的基礎資料都還是來自，單一商品的資料，但 computed 是使用 totalProducts ，全部商品的資料喔，因為兩邊的基礎資料本來就不相同，因此是無法正確操作的。
> - 只要是使用 全部商品的資料(totalProducts) 就會無法使用 API 回傳的 pagination 喔。
> - 另外一般實做時使用 前端的 搜尋商品的功能，並不會再搭配 pagination 哩。

---
4. Jordan_Tseng
老師、助教好，[這是我的程式碼](https://github.com/Jordan-TTC-Design/vue-2021-finalwork/tree/master/src)。想請教兩個問題，目前在做後台訂單，我是做求職網站，我的前台訂單會有三種狀態，我現在要篩選一個屬性篩選出其中一種，但是現在因為有些就訂單資料，沒有這個屬性，雖然好像是不影響操作，但是就會一直有錯誤提示出現(如下圖一)。另外想請教，我在前台創建訂單、後台創建企業或職位時，都會有很大量的下拉選單資料，我目前有的寫在html上，有的用js渲染(如下圖二)，我是在想說是不是都用js渲染，然後是可以把這些資料都另外裝在其他元件？不知道助教建議如何比較優？

> 助教回覆：
1.目前打開後台訂單頁面確實會跳錯，不過有看同學在 DashBoardOrdersList.vue 有使用判斷式進行，是否有 formAction 屬性的分類了，這部分有這樣的處理方法確實正確。
不過最好的辦法還是刪除沒有改屬性的訂單比較好哩，因為目前 API 無法直接為，完成的訂單新增屬性。

>2.確實會比較建議把資料獨立成 JS 或是 JSON 檔，有需要時再使用 import 引入（mixin 也是方法之一），再使用 v-for 把引入資料進行製作，這樣對 HTML 畫面來說也比較乾淨， 不過這邊看同學的下拉選單是帶有驗證功能的，那製作時就要比較小心，要符合他的規則，官方文件正好也有使用 v-for 製作下拉選單的範例同學也可以參考看看： https://vee-validate.logaretm.com/v4/api/field#rendering-simple-fields-with-as-prop

---
5. Iven
助教好：
不好意思助教，這是第二問，[這是我的程式碼](https://github.com/Iven10252158/final_project)，想問一下，當我的網頁高度不夠時（about.vue）footer會浮在上面是正常的嗎？試了好幾個方法，都會浮在上面，不然就是會在其他頁面（index.vue或products.vue）會卡在中間。
有辦法是不管網頁高度夠不夠，footer都可以黏在最下面的嗎？

> 助教回覆：
> 要達成同學需求會建議在 footer 上方的區塊，使用 min-height 語法並搭配 vh 單位，如果想要呈現的剛剛好，可以搭配 calc 計算功能：
> 以首頁來說會在 .banner 區塊添加以下 CSS
> min-height: calc(100vh - 72px );
> 由於每個頁面需要詳細計算高度不太一樣，其他部分交由同學自行調整囉，[這篇文章也有詳細說明](https://psilocine.github.io/2017/11/05/%E6%B5%85%E6%9E%90CSS%E5%AE%9E%E7%8E%B0Footer%E7%BD%AE%E5%BA%95%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E5%BC%8F/)可以參考看看
---

6. Erica
助教好，這是我的 [程式碼](https://github.com/ericacadu/panya)
我把購物車改成用 mitt 的方式傳遞資料後
在確認購物車的頁面 CheckOrder.vue
想請問為什麼一開始並沒有觸發取得購物車，要重新整理才會觸發呢？

> 助教回覆：
> 這邊是因為更新購物車後，切換到 CheckOrder.vue 會需要進行換頁的動作，如果這種會使用到換頁動作，對 mitt 的資料傳遞來說會較為不穩定，這是 mitt 本身的使用限制。
> 因此會建議 CheckOrder.vue 這種狀況，改使用 API 方式來獲得 cart 資料會比較好哩。
---

7. John G
助教我想請一下 我原本預期畫面會出現依序的圖片排列但是因為使用V-for所以圖片會重複，因為我有製作了版型但用v-for就會變成這樣 請問我該如何修正?
這是我的程式碼:
https://github.com/johnchan822/taiwantravel/blob/master/src/components/BestSale.vue


> 助教回覆：
> - 從同學敘述來看，同學是想要 BestSale.vue 的 v-for 圖片區塊，圖片順序 和 同學附上圖片的順序相同？
> - 如果是的話可以使用 display: flex 的 CSS 語法把圖片版行排好，再使用 v-for 製作哩，flex 製作的基礎版行[如這個範例](https://codepen.io/rider159159/pen/poPJKXd)
> - 如果助教這邊理解有誤，還麻煩請同學再補充一下敘述哩，助教這邊不確定理解是否有誤。
---

8. leo naruhodou

助教好，想請問助教vue cli的npm run serve環境，與npm run build出來後的環境，會有內容不一樣的情況發生嗎?
這裡是我的[github repo](https://github.com/overactive1988/vue_lesson8_homework)
在npm run serve環境中
我的swiper是有呈現Navigation的class樣式的(附圖1)
但在npm run build的環境中
https://overactive1988.github.io/HexSchool_vue_lesson2021/week08/#/product/-Mc_89P1FGB2NLexfyCC
Navigation元件雖然有抓到，但class樣式是空的qq...(附圖2)
這讓我有點對npm run build出來後的內容產生不信任感了Orz...
並想請問助教，應該要如何解決這個問題呢?

> 助教回覆：
這邊把 Product.vue 的

import "swiper/swiper.scss";
import "swiper/components/navigation/navigation.min.css";
import "swiper/components/thumbs/thumbs.min.css";

>改移到 assets/css/common.scss 中

@import "~swiper/swiper.scss";
@import "~swiper/components/navigation/navigation.min.css";
@import "~swiper/components/thumbs/thumbs.min.css";

>在重新 npm run build 就會能顯示囉

> 卡斯伯補充：
> Vue 中 scss @import node_modules 的檔案，路徑可以改為 `@` 作為絕對路徑

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