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

# 6/28 線上 Slack 助教

## 今日助教輪班時間

hsin-yu：6/28 (一)
回覆時間：下午 1:00 -下午 5:00

## 發問規範

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

## 注意

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

## 問題

1. **Jessie Cheng**：
助教您好，這是我的 [GitHub](https://github.com/JessieMosbi/vue-hex-cli-project)，想要詢問這個 [commit](https://github.com/JessieMosbi/vue-hex-cli-project/commit/37d198bde4114dfef75942da5ba83ac6e83432e0)
原來是想要整理一下後台 API 的程式碼：
(1) 將所透過 axios 呼叫的 API request 程式碼都整理在 adminApi.js
(2) 再將成功跟失敗要執行的 code 以函式參數的方式傳到 adminApi.js 裡面，等到 API response 回來就可以執行
但現在卡在步驟一，adminApi.js 取不到 this.$http，在 main.js 已經有用 app.use 引入進來，想請教原因是什麼呢？
> 助教回覆：
> 在 main.js 使用 app.use() 是讓 app 這個實體（由 createApp() 建立的實體）可以使用 axios 及 VueAxios 套件，因此在 .vue 檔案可以使用 `this.$http` 來串接 API
assets 資料夾雖然和 main.js 也有關聯，但不包含在 app 實體中，因此在 adminApi.js 無法使用 `this.$http`

---

2. **Fred Chang**：
助教您好，這是我的 GitHub [Repo](https://github.com/fred8196/Vue-Week6.git) 、 [Pages](https://fred8196.github.io/Vue-Week6/dist/#/login) ，想請問在 Login.vue 的第25行使用keyup.enter為什麼會發出兩次請求
> 助教回覆：
> 因 login.vue 中 form 標籤有監聽 submit 事件，當 form 裡面有 submit 按鈕，在其他表單元素按 enter 會觸發 submit 按鈕的 click 事件，登入 button 又監聽了 keyup 事件，因此會執行兩次登入請求（可以參考這篇[文章](https://xyz.cinc.biz/2016/07/form-input-enter-auto-submit.html)）

另一問題是: 如附圖，我將第六周作業的部分檔案搬到第七週繼續做使用，但在 public 下的index.html 發現第 8 行會讓 title 顯示第六週的名稱，目前是先將第 8 行註解，再插入第 9 行做變更，不曉得是否正確? 謝謝助教。

> 助教回覆：
> 直接修改 title 也是可以的，這裡也提供一篇關於修改標題的[討論](https://stackoverflow.com/questions/62023604/where-to-find-or-how-to-set-htmlwebpackplugin-options-title-in-project-created-w/67846199#67846199)，給同學參考看看～

---
3. **Iven**：
助教好：
不好意思，我有兩個問題
這是我的 [程式碼](https://github.com/Iven10252158/try_try) ，我想做的是在進入products 頁面的時候，會有全部的產品品項，透過旁邊的選單，可以依據不同的分類查看不同的產品，但是我現在是做出了透過分類查看不同產品的功能，但是一進到畫面的時候會無法看到所有品項，點擊全部商品的時候也看不到所有的品項，想請問助教程式碼該怎麼修改？

> 助教回覆：
> 因顯示所有產品的 .card 是使用 v-for 顯示 typeProducts 裡的資料，但是目前只有執行 change() 時才會賦予 typeProducts 資料，剛進入頁面時 typeProducts 是空物件（可以透過 vue devtool 查看），因此可以在取得產品列表資料時，將資料賦予到 this.typeProducts，才有資料可以顯示
點擊「全部商品」時，因為沒有一個產品的類別符合「全部商品」，用 filter 篩選出來的陣列會是空的，可以新增判斷若是空陣列就賦予 this.products（全部產品資料）給 this.typeProducts

這是另一個 [程式碼](https://github.com/Iven10252158/final_project) ，我的購物車列表的欄位都會沒辦法平均的分配，可能是因為我有設定固定寬度，但是如果不設定固定寬度，響應式會一直跑版，想請問助教有什麼辦法可以欄位平均又可以兼顧響應式呢？
> 助教回覆：
> 若希望表格欄位是平均分配寬度，可以在 .table 設定樣式 table-layout: fixed;
方法是參考 [table-layout - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout)
響應式的部分，因在較小的裝置（手機或平板）空間會有擠壓到表格資料的情況，不好閱讀，如果在行動裝置還是需要呈現所有表格資料，可以加上 table-responsive，在螢幕寬度縮小時表格會出現 scroll bar，用拖移捲軸的方式閱讀表格
目前同學使用隱藏欄位的方式也是可以的～

---
4. **Eric-小偉哥**:
老師、助教、同學好，[這是我的gitpage](https://weihaoeric.github.io/EricVueWeek3.github.io/) ，我有一個問題
這是我已開發好的 week3 的作業，我想問一下，我在 Chrome 可以順利的執行，
但換到 Safari，登入後就會出現 `alert(“Failed to get item list”)`
從 code 來看，是因為在 axios 發送 requst 報錯，被 catch 到產生的
但目前仍沒找到問題，請助教解惑，謝謝 :)
> 助教回覆：
> 同學的[程式碼](https://github.com/WeiHaoEric/EricVueWeek3.github.io/blob/main/javascript/login.js#L23-L24)中，儲存 cookie 的部分 token 和 expires 需寫在一起
> ```
> document.cookie = `hexToken = ${token};expires = ${expired}`;
> ```
> expires 主要是設定 token 的期限，不需要獨立儲存唷，目前將儲存 cookie 的部分調整後在 safari 是可以正確取得產品列表的，可以嘗試調整看看～

---
5. **Jordan_Tseng**:
老師、助教、同學好，這是我的 [程式](https://github.com/Jordan-TTC-Design/vue-2021-finalwork/blob/master/src/views/front/AddJob.vue) 、 [畫面](https://jordan-ttc-design.github.io/vue-2021-finalwork/dist/#/) ，想請問助教關於 checkBox 多選或是單選，是用資料渲染還是直接打上去？像是其他的下拉式選單就是直接打 option 上去。
> 助教回覆：
> checkbox 或 radio 選項可以用資料渲染的方式：將資料定義在 data() 中再使用 v-for 渲染，遇到需要改動選項的情況時，可以直接修改資料，渲染的部分就可以不用動哩

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