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

# 6/4 線上 Slack 助教

## 今日助教輪班時間

Ryder：6/4 (五)
回覆時間：下午 2:00 -下午 6:00

## 發問規範

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

## 注意

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

## 問題

1.Stacey Huang:

Ryder助教你好,
老師助教同學們好，這是我的 [CodePen](https://codepen.io/staceyhuang/pen/YzZeEOG)，想請問關於元件插巢 Props的問題
想請問HTML中的Line10 v-slot:default="slotProps" slotProps是否可自訂名稱呢?
此外,在HTML中的Line56 <slot :product="product"></slot> 想請問:product(是否為自定義的props名稱)="product(要傳遞到外層的資料)"
以上理解是否有誤呢?
謝謝老師跟助教:)

> 助教回覆：
> 1. 是的 slotProps 這個名稱能夠自定義，第 10 、13 、14 行的 slotProps 只要統一更改，他也能正確顯示哩。
> 2. 理解正確， :producct="product" ，第一個 product 也是能夠自訂義的，第二個 product 則是元件中要帶出到外層的資料哩。
> 同學的理解相當正確非常好哩。

2.獵人 :
請問助教及老師：
關於作業完成後想要優化UI，但依先前切版班的經驗都是有一份設計稿可以切版。在沒有可以用的設計稿及UI相關經驗下。要如何去優化作業的UI介面呢?
謝謝!!

> 助教回覆：
> - 這邊可以參考 六角的 [Vue 課程作品牆](https://www.notion.so/2fbc7dc4df4846a386df4b69976e0237?v=735180631b6d42a7895538d6eac81e87)，過去學長、學姊的作品。
> - 當然你也可以直接 google 搜尋，你想做的主題，實際的相關網站。
> - 另外就是搜尋模板網站，參考他們的設計，也是個不錯的選擇哩:
> - https://colorlib.com/wp/templates/
> - https://www.free-css.com/free-css-templates/page267/studio-francesca
> - http://www.cssmoban.com/

3.Bruce :
老師助教同學們好，這是我的 Codepen（[請附上連結](https://codepen.io/CHEN_B/pen/jOBZGpB)），我原本預期「delProduct函式可以順利刪除指定項目」，但是卻無法如預期進行，使用 console.log 查 this.tempProduct.id ，卻出現undefined想請問問題出在哪裡呢？

> 助教回覆：
> 這邊是因為 delProductModal 沒有把相關商品資料複製到 this.tempProduct 上哩，會需要調整一下 delProductModal 的方法，調整後就能使用哩，另外也附上調整後的 code :

    delProductModal(item){
      this.tempProduct = {
        ...item
      };

---