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

# 6/8 線上 Slack 助教

## 今日助教輪班時間

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

## 發問規範

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

## 注意

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

## 問題

1. Stacey Huang：
老師助教同學們好,[ Github Pages - 免費網頁空間隨你開 ](https://www.youtube.com/watch?v=njlABvVRB68&ab_channel=%E5%85%AD%E8%A7%92%E5%AD%B8%E9%99%A2)這個影片中,在1:05:28中,老師把/dist從.gitignore移除,但我自己在嘗試將Vue Cli所建議的專案上傳的時候沒有注意到這件事情,就直接把檔案上傳到GitHub Pages上,但還是有把畫面呈現出來,所以不是很懂把/dist從gitignore移除的差異,以下是我的GitHub Pages及Git Repositories, 謝謝助教
https://darahuang.github.io/test/#/
https://github.com/Darahuang/test

> 助教回覆： 這邊是因為目前，同學顯示的 GitHub Pages 網站是透過 gh-pages 這個[分支](https://github.com/Darahuang/test/tree/gh-pages)來做顯示。
> 因為是透過不同分支顯示 GitHub Pages ，因此同學 main 分支中 gitignore 沒有把 /dist 移除，他也是能正確顯示的。
> 老師影片中之所以會移除，是因為老師影片沒有做分支設定，以方便同學理解。
> 實務開發上都類似同學目前方法，使用分支來顯示真正要顯示的畫面哩，本次課程最終作業，也會請同學以分支來做顯示設定，也就是說目前同學做法沒有問題哩。

---

2.Tori:
老師、助教們好，這是我的 Github 、 Github Pages
想問：
在填寫表單並送出後，設計是會跳出訂單 & 購物明細，並可進行付款。
目前的狀況是，按下送出訂單之後，雖然 訂單 & 購物明細 可以正常顯示，需要出現的資料也都有抓到，但 console 卻跳出錯誤訊息(如圖)，不確定是哪個環節出了問題。
https://github.com/aer456987/natural_week_five
https://aer456987.github.io/natural_week_five/product_page.html

> 助教回覆：
這邊是因為同學 order.js 125 行
this.orderStatus = true
進行狀態切換後， order_page.html 223 - 321 行的區塊會被渲染。
不過一開始在渲染時，是還沒獲得 orderData.user 的資料，因此會跳錯。
要解決這個問題，需要把 order.js 125 行的
this.orderStatus = true
移到 147 行，getOrder 回傳後，再調整判斷，重新讓畫面渲染，調整後的兩段 code 如下:
https://codepen.io/rider159159/pen/BaWVbKX

---

3.鵬聖:
老師助教同學們好,想請助教幫我檢視一下我是哪個環節出錯，我照著老師提供的VeeValiadation筆記去操作，可是我卻會跳錯，附上程式碼及跳錯圖片。
助教 這是我的pages & hub
https://dstsidragon.github.io/Vue3Mission5-AdvancedGrammar/
https://github.com/dstsidragon/Vue3Mission5-AdvancedGrammar

>助教回覆：
這邊主要是 Vue3 CDN 重複引入導致 index.js 中的
import { createApp } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.11/vue.esm-browser.js';
不需要再次引入，因為 HTML 已經引入過 Vue 的 CDN 哩。
取消 index.js 的 CDN 後 ，在調整一下 createApp，調整後如下:
Vue.createApp({
xxx
})
調整後驗證功能就能使用哩。
再來 index.html 186、187 行，有名稱沒對上的問題，這邊統一調整後，這邊的驗證功能就能使用囉， 186、187 調整後如下:
<v-field id="email2" name="email2" type="email" class="form-control" :class="{ 'is-invalid': errors['email2'] }" placeholder="請輸入 Email" rules="email|required" ></v-field>
<error-message name="email2" class="invalid-feedback"></error-message>

---

4.Oober:
助教您好，這是我的codepen：https://codepen.io/xtsjrjdv/pen/wvJyaBv
我按照老師加碼的第四週作業製作新增的元件（是沒問題的），但是自己試做刪除的寫完後，畫面跑不出來，HTMLcode = 184行，jscode = 51，257～285 麻煩助教了。謝謝助教 (edited)

>助教回覆：
這邊檢查 JS 277 行有錯誤哩，少了 "" 雙引號，將 click 後的方法包起來，調整後應該是:
@click="$emit('del-product', tempProduct)"
因為目前同學附上 code 並不完整，因此請同學看看是否是這問題，如果還有問題建議附上完整程式碼喔。

---

5.yu0917:
此為我的程式碼連結
我想請問為什麼我在 product.html 第41行撰寫v-for=“product in products”，console會一直顯示找不到 product
謝謝，辛苦了～
https://github.com/yu19941994/vue_hw3
>助教回覆：
這邊是因為同學 product.html 41 行後方，有把 v-for 的 <tr> 標籤閉合哩，如圖:
>因為被閉合了，因此後面的 {{ product.category }} 等等，都沒正確取得資料哩，這邊把 41 行後方的 </tr> 標籤移除就沒問題囉。
>另外再補充一點 product.js Vue 綁定的是 id="app"，product.html 外層確是 id="app1" 這點也記得要改過來喔~
>

---

6.小妤:
老師助教同學好～
關於我的 code
src/views/back/BackProducts.vue 頁
(134行) this.$refs.delProductModal 不是取 DOM 元素的意思嗎 ? 為什麼當我按下 "刪除" 鍵會出現錯誤碼呢 ??
請問是哪裡寫錯了呢 ??
https://github.com/peggyted0129/vue3_week4_0607/blob/master/src/views/back/BackProducts.vue
>助教回覆：
>這邊有看同學在 mounted 綁定 this.delProductModal 為刪除 modal 了。
>不過同學可以先在 mounted 最上方使用:
> console.log(this.$refs)
>
> 會發現回傳的是空物件，因為同學在 BackProducts.vue 沒做任何 ref 綁定。
>
> 如果同學是想透過 ref 連到 ProductModal.vue 中的 delProductModal ，那麼在 BackProducts.vue 39 行的 <ProductModal> 會需要補上 ref。
>
> 假使目前在 <ProductModal> 補上的 ref 是 ref="test"

<ProductModal ref="test" :is-new="isNew" @update-product="updateProduct" :inner-temp="tempProduct" @get-data="getProductsA" @close-del-modal="closeDelModal"></ProductModal>

> 那麼連到 delProductModal 的寫法會是

console.log(this.$refs.test.$refs.delProductModal)

>有正確設定 ref 的指向，刪除 modal 就能使用哩。

---

7.Floya:
老師助教同學好～
進度緩慢的我還在寫第二周的功課
我的CODE
目前已經寫到刪除的功能了，但是我condole.log刪除的回傳值狀態值200，但是訊息如下
data:
message: "驗證錯誤, 請重新登入"
success: false
我去查文件好像沒有看到相關訊息，想問問看我是不是哪邊寫錯了?
https://codepen.io/TZU68/pen/abJjvZL

>助教回覆：
>目前看同學這邊是使用 codepen 製作本次作業哩，不過 codepen 無法正常操作瀏覽器 cookie 呦。
>而本次練習，登入、init() 都會使用到 cookie 相關程式碼。
>這邊請同學改在本地端測試，繳交作業則改由上傳至 GitHub ，目前助教把同學 code 抓到本地端，就能正常刪除囉~

>另外這邊在提醒一下，本周之後作業都會做到換頁、操作 cookie 等等方法，所以都建議同學改在本地練習，然後將檔案上傳到 GitHub 的方法哩。

---