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

# 6/7 線上 Slack 助教

## 今日助教輪班時間

SONYKO：6/7 (一)
回覆時間： 上午 9:00 - 中午 12:00

## 發問規範

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

## 注意

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

## 問題

<font color="#bc93b0">1. 小妤　🐑
老師助教同學們好，這是我的 [GitHub](https://github.com/peggyted0129/err_week4_0606)
請問把外層的 tempProduct 傳進內層且也能把內層"編輯"後的內容也傳出給外層這小段上星期卡好久，剛剛看到老師星期五的直播已經有解答了，使用 watch() 後，此問題已解決
* (問題一) 觀念還是有點亂，請問我這部分使用 watch() 的用意是因為內層使用 created(){this.tempProduct = this.innerTemp} 只能得到第一次的值，所以才需要使用 watch() 來監聽後續的變化嗎 ?
* (問題二) 請問 ref 的觀念是**只有從外層取內層**的資料使用的嗎 ?
* (問題三) 還有我的 BS5 modal 是寫在外層 BackProducts.vue，預期在內層 ProductModal.vue 的 #delProductModal 預計按下「確認刪除」後，modal 視窗關閉。**請問按下「確認刪除」後 modal 視窗關閉這段...，如果要寫在內層的 delProduct() 方法裡，請問要怎麼寫這段才能使 modal 關閉呢 ?** (目前使用笨方法又複製一次外層的寫法，不知道為什麼觸發不了關閉 modal ?)</font>

> 助教回覆：
> 1. 同學有提到整個流程了，這個流程會造成單向數據流的錯誤（透過 props 傳進來的 data 無法改變他的值）
> 為了不要更動到值，會用 watch 來監聽傳進來的 innerTemp、 當他發現你要更改他的時候，就會去執行 this.tempProduct = this.innerTemp 這個動作， 這個動作的意思是「將元件內的 data 去接替傳進來的 data 」，用接替的那個 data （this.tempProduct）去修改值就不會有錯誤了。
> 以同學的作業來說 `this.tempProduct = this.innerTemp` 不要寫在 created 內 、另外 watch 172 行 要改成 `this.tempProduct = this.innerTemp`。
> 2. ref 你可以想成是 document.querySelector 、他們操作也很相似，就是取得 DOM 節點。
> 3. 方法寫在內層可以， 但由於沒有使用 $emit 將資料帶到外層觸發，所以按下按鈕不會有反應歐。

---
<font color="#bc93b0">2. MM　🐑
老師助教同學們好~想請問
◆問題一：這是圖片，apiUrl站點部分，有時候看老師是寫https://vue3-course-api.hexschool.io/api"，有時候沒有最後面的api(只有https://vue3-course-api.hexschool.io/)，請問有什麼區別嗎~
◆問題二：這是我的[GitHub](https://github.com/0v0mm/Hex-Vue3/tree/main/hw2)、[GitHub-Pages](https://0v0mm.github.io/Hex-Vue3/hw2/login.html)，想請問為什麼產品頁面都會跳出提示請重新登入~是token沒有儲存嗎？不曉得該修正哪裡才對QQ
再麻煩指教了，謝謝</font>
> 助教回覆：
> 兩種寫法都是可以的唷， 不過通常只會去存前面的域名。不過因為我們的 api 網址都是後面帶 /api ，所以要這樣存也 ok 。 另外除了登入登出之外， 沒有寫 /api 的話要自己補上歐！ 例： `${this.data.apiUrl}api/${this.data.apiPath}`
>
> 同學的問題二也是因為網址錯誤的關係， 將 api/ 補上之後就會動了。 另外產品頁面名字改成 products_w2.html 了， 轉址的時候也要記得改一下。

---
<font color="#bc93b0">3. yu0917 　🐑
老師助教同學好，
想請問我在轉址的時候（從index.html轉換到product.html)
為什麼Vue devtools仍然顯示index.js的資料
github:[連結](https://github.com/yu19941994/vue_hw3)</font>
>助教回覆：
>同學的 code 目前還有 bug , devtools 就不會顯示出來。 但目前 vue3 的 devtools 還是Beta版狀況有點多， 同學可以先試著修正 code， 可以動之後再看看 devtools 會不會跑出來。
>如果之前有裝 vue2 的 devtools 可以試著先關掉看看。或是檢查工具關掉重開等方法都試試看 OAQQ 。助教這邊的 devtools 也是有時候有 有時候沒有的 💦

---
<font color="#bc93b0">4. Jordan_Tseng 　🐑
老師助教同學好，我想問說vue在console報錯時，好多都不像js直接報哪行錯誤，有時候真的是找半天不知道是哪行錯。想問說這有沒有什麼好方法可以處理～</font>

>助教回覆：
>想知道同學的錯誤是哪一種 >A< (黃黃的還是紅紅的)
>他雖然不會說是哪一行， 但都會有關鍵字！ 可以從他給的關鍵字下去找自己的 code 裡面哪裡有提到這個東西、從那邊去改寫。 或是把錯誤整行拿去 google <-- 助教們推薦
>如果有較詳細的錯誤參考可以再拿給我們看唷～～～～
>