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

# 7/9 線上 Slack 助教

## 今日助教輪班時間

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

## 發問規範

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

## 注意

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

## 問題

1. 金金：
助教好，這是我的github
https://github.com/vezona/hexschool-vue-2021.5/blob/main/w3_2021.05.21/w3_mainHW/w3_mainHW_products.js
我原本預期「JS 第 90行會判斷是編輯或新增產品」，但目前點擊編輯後的確認紐，卻都是直接新增一個產品。想請問問題出在哪裡，謝謝~

> 助教回覆：
> - 這邊看是同學 66 、 69 行 this.isNewTitle 的賦值剛好寫反囉。
> - 以編輯產品為例，點擊編輯產品後同學會將 this.isNewTitle 賦予 false 的值。
> - 然而在 updateProduct 中，因為 this.isNewTitle 是 false 便不會將 editProductURL 、 http 都換成 編輯商品使用的值，因此變成新增商品哩。
> - 解決辦法就是將 66 、 69 行 this.isNewTitle 的賦值對換過來喔。
---
2.Ming
助教你好，我參考同學code，也嘗試製作自訂換頁功能，[github](https://github.com/ankazu/spirit/blob/master/src/views/frontend/Products.vue#L202) ，以下遇到幾個問題。
1.取得pages資料後，嘗試把pageProducts 放到29行，但Pagination 沒有出現第二頁的頁籤，相同產品也會一直出現 PS. 71行的判斷還沒移除。
2.這樣修改後，我的filterCategory方法，看起來是要重新編寫過。
3.關於proxy的問題，我在Product 219行，遇到轉換問題，請問num為什麼不能用parseInt來做轉換。
希望助教能給個方向，我卡住了QQ。
謝謝助教

> 助教回覆
> 1. 分頁數量主要是根據 page.total_pages 這個屬性去做頁數渲染，這邊看同學 getProductsList 中沒調整到這個屬性。
> - 207 行的 pages.page_total 替換成 page.total_pages，替換後第 2 頁就出現囉，另外其他的 pages.page_total 也都要做替換。
>
> 2. 不需要完全重新編寫喔，商品的基礎資料是 pageProducts ，而同學 filterCategory 過濾後的資料是 this.products，因此要把 filterCategory 產生的資料改成 this.pageProducts ，並且再執行 this.getProductsList() 重新獲得分頁資料。

filterCategory(e) {
  this.isLoading = true;
  this.pageShow = false;
  const api = `${process.env.VUE_APP_API}/api/${process.env.VUE_APP_PATH}/products/all`;
  this.$http.get(api).then((res) => {
    if (res.data.success) {
      this.pageProducts = res.data.products.filter((product) => {
        if (product.category === e) {
          this.productValue = e;
          return product;
        }
        if (e === undefined) {
          this.productValue = 1;
          return this.products;
        }
        return false;
      });
      this.getProductsList(this.pageProducts);
      this.isLoading = false;
    } else {
      console.log(res.data.message);
    }
  });
},

> 3. 這邊看是能的喔，要注意的是有裝 eslint ， eslint 會要求 parseInt() 要寫入第二個參數，第二個參數代表的是什麼進制喔，詳細可參考 [MDN 文件](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/parseInt)

      const num1 = parseInt(this.tempProduct.acidity, 10);

---

3.金金
助教好~又是我:rolling_on_the_floor_laughing:
這是我的github https://github.com/vezona/Sweet_Home_Vue3_Project/blob/main/src/components/editModal.vue
Q1.在第36行我想呈現其他圖片。明明看vue devtool都能抓到imagesUrl，但這邊一直說抓不到imagesUrl ><
Q2. 我在此頁第42行( https://github.com/vezona/Sweet_Home_Vue3_Project/blob/main/src/views/back/ProductsList.vue ) 想點擊刪除的按鈕，卻沒辦法成功跳出deleteModal
再請助教協助!! 感謝 (edited)

> 助教回覆
> 1. 這邊看 editModal.vue 有很多錯字喔， 26 行 - 50 行 應該是 `temProduct.imageUrl` 同學打成 `tempProduct.imagesUrl` ，另外外層 ProductsList.vue 中 `imagesUrl` 也請改成 `imageUrl` 。
> 上面錯字都調整後， console 就不會噴錯囉

> 2. 這邊看 delModel.vue 中綁在 HTML 的 ref 是 `ref="delProductModal"`
> - 但同學 mounted 中確是指向 `this.$refs.delmodal` 還請替換上面 HTML 的 ref 名稱喔

  mounted () {
    // 用refs取得Dom元素
    this.delmodal = new Modal(this.$refs.delProductModal)
  },

---

4.Tommy
助教好，這是我的[github](https://github.com/apple19890708/hexschool-homework/tree/main/hexschool-homework-week-6)，我的eslint設定完成後，用 npm run serve 會一有下面這張圖的問題，但我不確定是我哪邊沒設定好，再請助教協助，謝謝。
> 助教回覆
這邊金金同學有在問題 Slack 回覆，他的回覆是正確的喔，這些都是裝了 ESLint 後， ESLint 針對你 專案中 code 提出的警告、建議，同學可以按照金金同學建議調整喔。
之後有發生 ESLint 錯誤也都可以先 google 哩，ESLint 有詳細文件，只要有搜尋錯誤標題，他都會顯示哩。

---

5.蓋瑞
助教好:
想請問我VUE CLI編譯出dist後,但點擊裡面index.html會是空白沒有內容,console後會出現以下圖片,但我本地端可以運作,想請問還有哪裡要設定嗎?
這是我的github
https://github.com/garyissogood/2021vue-week/tree/main/week-6
及上傳的github page
https://garyissogood.github.io/2021week6/

> 助教回覆
> 1.會需要在根目錄設置 vue.config.js ，裡面的設置可以參考[這篇文章](https://tzuhui.github.io/2020/03/02/Vue/Vue-CLI3-to-github-pages/)
> 2. 目前看同學 GitHub 專案中沒有 dist 資料夾，若要開啟 GitHub page 也需要將 dist 資料夾上傳到 GitHub。
> - 也補充一點，如果同學為了開啟 GitHub page ，將專案本身和 dist 資料夾上傳到同一個分支，vue.config.js 會和上面文章稍有不同，這部分可[參考其學員專案設置](https://github.com/Iven10252158/final_project/blob/main/vue.config.js)
---

6.Erica
助教好，這是我的 [Repo](https://github.com/ericacadu/panya)
1.我想在後台 productModal.vue 加入 Draggable 功能
在第 337 行測試時發現，如果是一開始就建立好的資料可以顯示，但如果是打開 modal 才傳入的資料就不會顯示
2. 同樣在 productModal.vue 選擇類別和單位的部分，希望在沒有選擇的時候可以送出空值，並和其他必填選項一起跳出提示，但依舊是顯示預設文字
3. 前台購物車調整數量的 input，如果想要點選 focus 狀態時，讓游標自動在字串的最後面該怎麼做呢？

以上請助教幫我看看該怎麼調整，謝謝 (edited)
> 卡斯伯回覆
1. Draggable 也是元件的概念，因此可以確保傳入的資料是新的，可以使用 v-if 在外進行判斷

<div v-if="photos.length">
  <Draggable v-model="photos">
    <template #item="{item}">
      {{ item }}
    </template>
  </Draggable>
</div>

2. `<option value="" selected disabled>選擇類別</option>` 可以帶入空值喔
3. 對於操作 input 內的游標我也沒有處理過喔～，建議可以先把整體完成後再來研究這段 :)

---

7.蔡皓全
助教好，我想請問我想像[這網站](https://www.cheogajip.com.tw/) 一樣按了右上方的menu後網頁就不能再上下滾動是用了甚麼語法呢?
2.為甚麼我用npm 載入了animate.css沒有效果但cdn載入就有呢 我的[github](https://github.com/DavidTsai-whole/vuecli3) 謝謝

> 助教回覆
> 1. 這個效果主要核心是 CSS 喔，在開啟選單時，在 body 添加 overflow-y: hidden 這個 CSS。

body{
overflow-y: hidden;
}

> 2. 若使用 npm 方式引入，那要在 main.js 中使用

import  'animate.css'

> 這樣才會吃到 animate 的 CSS 效果哩。

---
8.Jordan_Tseng
老師、助教好，
這是我的[扣](https://github.com/Jordan-TTC-Design/vue-2021-finalwork)、[頁面](https://jordan-ttc-design.github.io/vue-2021-finalwork/dist/#/)，我最後的助教時間想請教幾個問題：
1.如果我想首頁單獨header樣式不同，就是要跟其他前台不同頁面綁在不同的母元件上嗎？
2.如果我想做一個假的登入，是只要在原本Front多增加一個值，然後在設定入境那裡每個都寫props?每個子頁面加上都取值後先做一次判定這樣？還是也換掉最外層元件？
3.昨天有問到關於swiper的問題，感謝助教幫忙，讓我知道真的滿多狀況都會因為資料還沒取好，導致畫面有問題。我有用if去判斷了，切換按鈕本地ＯＫ，但github page也是爆掉～其實我也有其他好幾個像是輸入匡都是還沒資料上去導致都要用v-if判斷。這個我是想問說以我全部職位頁面為例子，我用了很多不同陣列，很多都環環相扣，而且都是非同步進行，所以感覺好多不同function 都糾纏在一起，我要下助教說的判斷，也就要回去閱讀到底我順序是如何。這是正常嗎？我有看到有人分享說盡量讓fuction乾淨一點，這裡會怎麼做到比較好。

> 助教回覆:
> 1. 最好狀況當然是在各自 .vue 檔中設定套入需要的 header 樣式，但也有有一種方法是，將 header 集中在 Front.vue 在透過 `this.$router.currentRoute` (當前路由) 搭配 v-if 去做 header 顯示，但會比較建議在各自 .vue 檔套入需要的樣式，不管事後序維護還是程式碼管理都是比較好的方法。

>2. 這邊不清楚同學製作假的登入，目的為何？還請同學補充一下需求哩，要釐清你的需求才比較好給建議哩。

>3. 這邊看 fuction 數量是正常的，運作邏輯也沒有什麼問題，要說比較有問題的函示是 SearchList.vue 的 searchJob ，一般而言這種會需要搜尋大量資料（資料庫）的內容都是交由後端完成，因為同學本來資料就較為複雜，又要完成比較偏向後端處理的功能，自然會造成這種函示複雜的現象哩。
>
>同學提到的 全部職位頁 函示處理上也都是正確的，因為同學本身設計的資料較為複雜，因此同學再對 Vue 、 JS 還不是很熟悉狀況，會覺得混亂是正常的。
>如果會有不清楚自己的 fuction 做什麼處理，這邊建議同學多寫註解、或是筆記哩。
>
---
(這邊只能由助教編輯，問題請到 thread 上詢問)