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

# 6/16 線上 Slack 助教

## 今日助教輪班時間

暄雯：6/16 (三)
回覆時間：上午 9:00 - 下午 1:00

## 發問規範

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

## 注意

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

## 問題

1. **Jordan_Tseng**：
老師、助教、同學好，我想問結合 Bootstrap 的部分，我的購物車是用 Modal，按下結帳就會用 rout-link 跳到，view 裡面的 check 結帳頁面，但是只用 .hide() 只關起來彈跳視窗，關不起來背景。想知道這個問題出在哪？
> 助教回覆：
> 同學在打開 Modal 時是使用 data-bs-target 來開啟，但同時在 Cart.vue 又用了 new 來建立一個 Modal 實體，導致 Modal 打開時多建立了一個 modal-backdrop。
因此關閉 Modal 時，只有關掉一個 modal-backdrop 哩。
建議同學可以將 openModal 的行為統一改用 this.modal.show();
修改後，在前台頁面的購物車，就可以用 emitter 傳事件到 Cart 去呼叫打開 Modal 的方法。
---
2. **圈圈**：
助教不好意思，我是從 [昨天助教服務](https://hackmd.io/@hexschool/BygqmGbO_/https%3A%2F%2Fhackmd.io%2FCr71_6iVR5e_M0xbeNmH1Q) 那邊過來留言的。
昨天 ryder 助教有協助我解決報錯「Unexpected mutation of "tempProduct" prop」的問題，照他說的在ProductAdmin.vue 中的 <product-edit-modal> 補上 tempProduct 這個 props ，存檔也正確運行未報錯。
但剛剛將 ProductEditModal.vue 本來註解起來的 addImgs 和 deleteImgs function 打開，又再度報錯。 ctrl+c 中斷終端機，重新 npm run serve ，又可正常運行，但發現下方有多紅色毛毛蟲， vs code 的問題也還是有出現「Unexpected mutation of "tempProduct" prop」
這是我的 [github](https://github.com/vvvvvvii/vue-homework/tree/main/week06) 希望能再麻煩助教幫我看一下。
> 助教回覆：
因為 props 是單向數據流的關係，子元件不能修改外層的內容。如果外層被子元件修改的話，就會跳出錯誤哩。
這邊建議同學可以先在元件內的 data 新增一個屬性，例如：newProduct，並將外層的資料拷貝到 newProduct。而 Modal 內呈現的資料會是由 newProduct 提供。當點擊確認按鈕後，才會執行 $emit 來修改產品資料。
小提醒：ProductAdmin.vue 第 123 行的 :tempProduct 要改為 :temp-product
---
3. **陳sam**：
老師、助教、同學好，目前上傳 [Github](https://github.com/highdanny11/week6-vue-cli) 但是我 dist/index 無法抓到路徑，我看影片著弄但是一片的其中一段，我的專案裡面沒有這個檔案。
> 助教回覆：
因為 vue cli 版本不同的關係，所以專案的內容會跟影片不太一樣哩。
目前同學使用的是 4.5.13 的版本，在這個版本，路徑的設定會放在 vue.config.js 這個檔案裡。可以參考這篇說明：[配置参考](https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE)
影片中的 assetsPublicPath 對應的就是此檔案中的 publicPath 屬性，可以試著修改看看～
---
4. **圈圈**：
助教好，關於單向數據流，物件不是會有物件傳參考值嗎？我以為這樣除非直接改變參考，不然不會有問題？
> 助教回覆：
這邊同學的確沒有直接修改產品的資料，而是修改 tempProduct 的內容，但是 tempProduct 是屬於外層的資料，因此在元件內針對 tempProduct 調整的話，就是直接修改外層的資料哦
---
5. **Stacey Huang**：
老師助教同學們好，有些套件會針對 Vue 來客製化，像是 vue-axios，因此，想請教一下，安裝外部套件時，會安裝哪種版本的套件呢？謝謝！
> 助教回覆：
通常都會安裝最新版本哦，如果沒有特別打版本號，安裝時也都會是最新的版本～
---
6. **蔡皓全**：
老師助教同學好，這是我 [程式](https://github.com/DavidTsai-whole/5)
1.想請問為甚麼我在 all.js 檔加上 127~143 行後資料就讀取不到了（如圖）
2.另外我的購物車列表裡面的數量 / 單位的 input 欄位無法調整數量不知道哪裡有問題
謝謝！
> 助教回覆：
>1. 因為同學在 all.js 裡只有載入 creatApp，沒有將 Vue 載入完全。
而 Vee Validate 也無法透過 esm 的方式載入。建議同學可以改用 CDN 的方式載入 Vue，all.js 裡則改為 Vue.creatApp 撰寫
小提醒：在 HTML 裡，all.js 建議放在最後載入
>2. 目前調整數量時沒有觸發修改數量的事件哦，需要再用 v-on 綁定 updateCart(item) 哩
---
7. **Jordan_Tseng**：
老師助教同學好，這是我的 [Code](https://github.com/Jordan-TTC-Design/vue-2021-hw6)，這是後台 productList 檔案，子元件動作我記得可以用小老鼠傳，但是我用小老鼠就沒效，只能用 v-on:。好奇怪～是我 npm 有誤嗎
> 助教回覆：
目前這邊修改後，測試是沒有問題的，建議同學可以將有錯誤的程式碼傳上來，這樣我們會比較好檢視～
如果同學嘗試後還是有一樣的狀況，可以將 deltetProduct 改為小寫試試看：
@deltet-product="deleteProduct"
---

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