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

# 7/1 線上 Slack 助教

## 今日助教輪班時間

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

## 發問規範

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

## 注意

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

## 問題

1. Ming：
助教你好，附上我的 [github](https://github.com/ankazu/spirit)，想請問助教，我想讓我的產品列表一頁出現12個商品，API好像只會有10個，我該怎麼做，用取得全部商品嗎? 還是說弄成元件card ? 那page換頁該怎麼處理。謝謝助教。

> 助教回覆：
> 商品列表一頁確實只會回傳 10 個商品，這部分是後端設定的，如果同學想要達成一個頁面顯示 12 個商品，確實會需要改用 全部商品 API ，先將全部商品抓下來， 而分頁部分則會需要自己寫判斷， Erica 同學[專案中](https://github.com/ericacadu/panya/blob/master/src/scripts/methods.js#L44)有做出類似功能，同學可以參考看看。

---
2.Awei
助教好～不知道這問題能否在這發問！
目前我正在使用一個套件[ element UI](https://element.eleme.cn/#/zh-CN/component/dialog) 搭配 Vue 做出一個彈窗！
點擊一個框框可以彈出一個彈窗，那個彈窗內有放一些物件可以選取，選到的東西會跑到一開始那個框框中。
遇到的問題是如果我希望那個彈窗的樣子，是附圖那樣。
我該怎麼寫會比較好呢，因為目前彈窗上的按鈕我是用 data 內的 buttons 陣列渲染出來的，在 HTML 結構上也只放 一組這個

 <div class="buttons">
      <div class="button" :class="{'isActive': item.active}" v-for="(item, index) in buttons":keys="index"
         @click="toggleActiveClass(index)"
      >{{ item.name }}</div>
 </div>

這是我目前的 [程式碼範例](https://codepen.io/hong-wei/pen/NWjPwGX?editors=1010)。

PS. 抱歉買了直播課因為工作的關係，跟不上進度！所以目前都依照自己的進度在學習～
不知道我遇到的問題在影音課的第幾週可能有提到呢，或許我也可以到那一週惡補一下。（目前只上第一週）
附圖是我希望彈窗可以呈現的 CSS 樣式。

> 助教回覆：
> - 同學 CSS 樣式部分可以直接使用原生 CSS 就達成。
> - 如果同學是想透過 v-for 直接顯示同學附圖中，多層次的格式，則可以將原始資料 使用 陣列包 物件 在包陣列 的方式，再使用兩層 v-for 來達成這個需求。
>- 這是[調整後範例](https://codepen.io/rider159159/pen/KKmwjdR?editors=1010)，activeButtons() 的部分交由同學自行完成

---
3.蔡皓全
助教好，
1.我想請問在我後台的優惠券元件的編輯優惠券modal中的到期日為甚麼沒有顯示出來當天的日期
2.另外我想問關於bootstrap中我已經有匯入1支reset.scss的檔案可是為甚麼很多像是ul還是有margin-bottom:1rem，在variables檔裡面很像沒看到可以修改的地方? [github](https://github.com/DavidTsai-whole/vuecli3) 謝謝

> 助教回覆：
> 1.這邊是因為 type="date" 的 input 要顯示出來，只會接收指定格式的值，這邊把 CouponModal.vue 96 行替換成

[this.due_date] = new Date(this.tempCoupon.due_date * 1000).toISOString().split('T')

>就會正確顯示囉
>
> 2.
> - 這是因為同學 all.scss 中 `@import './helpers/reset';` 是在 `@import "~bootstrap";` 上方
>
> - `@import "~bootstrap";` 這段會再把 node_modules bootstrap SCSS 再次引入，因此 BS 的設定會蓋住 reset 的設定。
> - 如果同學想要用 reset.scss 蓋住 bootstrap 設定會需要把
> `@import './helpers/reset';` 放在 `@import "~bootstrap";` 下方。
> - 不過這邊 BS 因為也有對 class、 id 做設定，不少元件會因為 CSS 權重無法正確被 reset 的設定覆蓋喔，一般來說你的網站使用到較多的 bootstrap 元件時，就不太會使用 reset 去重置，會自行新增 SCSS 檔，再使用 CSS 去做對應 CSS 覆蓋動作。

---

4.Iven
助教好：
這裡是程式碼，有一個問題就是，我原本的產品列表的卡片內部都是排整齊的，但是只要我跳去別的頁面再回到產品列表，card-body都會自己展開，連單一產品頁面裡的card也會自己展開，不曉得我的程式碼哪裡有不對的地方，想請助教幫忙，謝謝。

> 助教回覆：
> 從商品列表頁切換到購物車頁，在切回到商品列表頁，卡片確實會有跑版狀況。
> 之所以 商品列表頁，卡片會變形是因為吃到 Cart.vue 中的

  h6{
      margin-top: 100px;
  }

>這段 CSS 語法，如果要讓每個 .vue 檔案 SCSS 不互相影響，需要在 style 標籤上添加 scoped 屬性喔。

<style lang="scss" scoped>

---
5.Tommy
助教好:
這是我的[github](https://github.com/apple19890708/hexschool-homework)，我今天要把作業三push一版新的上去他有報錯，但不太理解為甚麼
想知道是我只領哪邊有打錯嗎？謝謝。



> 助教回覆：
> 從同學附上圖片來看，同學建立多個 git 檔來追蹤，不過都是在同個專案下，這邊同學可以試者在 hexschool-homework 這層時，輸入以下 git 指令來更新：

git add .
git commit -m "更新內容"
git push origin 

因為同學目前沒附上完整操作，助教這邊只是推測，如果還有問題，還請同學附上詳細的 git 操作喔。

---
6.助教好，這是我的[GitHub](https://github.com/dstsidragon/vue3mission7-backend),
在 front >> Index.vue 的第5~7行，
只要在P標籤裡面加上class(任意class都會)後，
網頁切到其他頁面再切回首頁就會跳錯。
嘗試換過標籤或是把第五行移出去div外，狀況還是一樣。
有上網查過錯誤訊息，但是還是不知道是甚麼原因。
想請助教解惑，謝謝~

謝謝助教!!原來是這樣-14:53


> 助教回覆：
之所以會出錯是因為

> 助教回覆：這邊是因為同學的 Index.vue 的 HTML 沒有正確閉合喔。
> .vue 檔的 HTML 除了最外層 template ，在 template 下一層必須使用一個 HTML 標籤，將該 .vue 檔內容全部包起來。
> 以目前同學的 Index.vue 來說，就必須把第 9 行的 `</div>` 移至 19 行 `</template>` 上方。
> 有正確調整過來就不會出錯囉

 <template>
  <div class="position-relative">
    <div class="banner"></div>
    <div class="banner__font bgc-transparent rounded text-dark ff-HachiMaruPop">
      <p class="banner__subtitle">創意演繹極致口感</p>
      <br />
      <p>-勾起你心中的餓</p>
    </div>

    <div class="box"></div>
    <!-- 讀取畫面 start -->
    <div class="container">
      <Loading :isVueLoading="isLoading" />
    </div>
    <!-- 讀取畫面 end -->
  </div>
</template>

---

7.Awei
謝謝助教～但又遇到問題了！剛剛自行想做出點擊上面的選項，可以讓點擊的選項跑到框框中，不過看了目前助教這樣的寫法，我完全不知道該怎麼讓他顯示在框框中了，抱歉！
[我的程式碼](https://codepen.io/hong-wei/pen/vYmEoZj?editors=1010)，我還是會繼續嘗試看看的
> 助教回覆：
可以在 vue data 新增一個變數，接著在觸發 toggleActiveClass 事件時，以解構方式將第三層陣列 array 的值，統一丟到新變數上，在把 computed 的基礎值，改成新變數就可以達成目標囉，這是[調整後的範例](https://codepen.io/rider159159/pen/Exmjarv)，你可以參考看看

---

8.LEEE :
助教好，[這是我的github](https://github.com/yunlew531/Latte-Cake)。我想請問: 我的後台根目錄/admin (Backstage.vue)底下有4個children，我預期用 Backstage.vue 裡的 router-link 切換 router-view 只會觸發 children 的生命週期。但是我切換 children 的時候整個 Backstage.vue 都跟著 created → unmounted，導致子元件切換之間都會再跑一次檢查登入的api。想請問助教是哪個地方出錯了呢?謝謝:pray:

> 助教回覆：
> - 這邊看同學有在 App.vue 為 router-view 添加 `:key="key"` 的設定。
>- 因為這個 :key 的設定，導致每個頁面在做切換時，都會完全的重新渲染，即使是 children 層，使用 <router-view> 做切換，也都會因為 `:key="key"` 效果導致整個畫面必須重新渲染喔。
>- 這邊把 App.vue 中 <router-view> 上的 `:key="key"` 移除，後台生命週期就正常囉。

---

9.sec:
助教好，想请问第7周范例中的的 ToastMessage.vue内. 看了范例的画面只是一个土司例如当登入成功的时候会显示, 但为什么要使用 v-for？
> 助教回覆：
> 之所以寫成 v-for 是為了讓訊息框，在有複數 messages 資料時，能夠一次顯示多個喔，如圖：
> 

---

10.
> 助教回覆：
>
---

11.
> 助教回覆：
>
---

12.
> 助教回覆：
>
---

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