---
tags: Vue 直播班 - 2021 夏季班
---
# 6/10 線上 Slack 助教
## 今日助教輪班時間
Ryder：6/10 (四)
回覆時間：下午 2:00 -下午 6:00
## 發問規範
老師助教同學們好，**這是我的 Codepen**，我**原本預期**「JS 第 8 行會出現數字 8」，**但卻出現**「預期外的結果是 0」，想問下問題出在哪裡？
## 注意
1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. 以下問題區塊只能由助教自行增加
5. 助教會將回覆寫在下方問題區塊
## 問題
1. Stacey Huang ：
Ryder助教你好,
老師助教你們好,這是我第五周作業的[GitHub](https://github.com/Darahuang/live-vue3-training-chapter-works/tree/main/week5),不是很懂在components中的productModal組件的line-76~80為甚麼要使用watch來做到單向數據流? (這部分的做法是參考老師的第五周作業解說)
但我一開始有參考[官網](https://v3.cn.vuejs.org/guide/component-props.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81), 然後嘗試使用下列的方法,但無法將props-product存到tempProdcut中,是因為product所傳入的是物件的關係嗎? 再麻煩助教了,謝謝!
```
props: ['product'],
data() {
return {
tempProduct: this.product
}
}
```
> 助教回覆：這邊同學算是發出兩個提問，助教這邊分別回答:
>1. 目前同學 GitHub 上單向數據流寫法是正確的，之所以要這麼做，主要是實作中會很容易遇到，需要調整 props 傳近來值的情境，因此老師有講解到這個功能哩。
>2. 按照官方寫法無法成功，主要問題是在 productModal.js props 的 product 本身就是非同步獲得的資料，如果是非同步獲得的資料就無法使用這個寫法喔。
>如果是非同步傳送 props 的狀況要做，單向數據流，就會使用到老師教到的，由 watch 來做單向數據流的方法。
>當然如果 props 使用的是一開始就定義好的值，而不是非同步的值，那麼這個寫確實能成立，比如[這個範例](https://codepen.io/rider159159/pen/xxqaOeW)
---
2.kevin嘉軒:
Ryder助教你好
第四週作業使用ref的方式修改Modal的元件
並搭配x-template的方式
但有個問題，不知道為什麼在html中，ref要綁兩次才能正常操作
這是我的git https://github.com/Kevin-Chia-Hsuan/Vue-live-week4/blob/main/index.html
第101行
```
<user-product-modal :temp-product="tempProduct" @update-product="updateProduct" ref="userProductModal"> </user-product-modal>
252行
<div id="productModal" ref="productModal" class="modal fade" tabindex="-1" aria-labelledby="productModalLabel" aria-hidden="true">
```
> 助教回覆：這邊之所以要綁兩個 ref 是因為兩個 ref 指向不一樣喔。
```
<user-product-modal :temp-product="tempProduct" @update-product="updateProduct" ref="userProductModal">
```
>上面這個 ref 指向的是 userProductModal 這個元件，同學可以在 index.js 的 mounted 中使用
>`console.log(this.$refs.userProductModal)`
>會發現他確實指向 userProductModal 這個元件，它裡面也還有 userProductModal 的 methods。
>
>
```
<div id="productModal" ref="productModal" class="modal fade" tabindex="-1" aria-labelledby="productModalLabel" aria-hidden="true">
```
> 而上面這個 ref 則是指向 productModal 這個 DOM 而已，在 userProductModal.js 的 mounted 中使用
> `console.log(this.$refs.productModal)`
>會發現他確實只單純指向 DOM ，因此
```
this.productModal = new bootstrap.Modal(this.$refs.productModal, {
// 點擊背景/按鍵盤，不關閉視窗
keyboard: false,
backdrop: 'static',
});
```
>這段確實能夠改寫成
```
this.productModal = new bootstrap.Modal(document.querySelector('#productModal'),{
// 點擊背景/按鍵盤，不關閉視窗
keyboard: false,
backdrop: 'static',
});
```
>範例中之所以刻意使用 ref ，就是為了讓同學理解 ref 的指向喔，以上同學可以在理解看看喔 :D
---
3.youting:
助教好，這是我的 repo https://github.com/youtingluo/vue3-week5/blob/main/all.js
我要解決查看單一產品細節加入購物車重複產品疊加的問題，我預期第81行判定產品有重複時，會在84行將要更新的 qty 賦予為當筆購物車的產品數量+1，然後執行 updateCart 更新購物車函式，他會更新沒錯，但還是會繼續執行 else 後的 post 行為，且 qty 數量為84行重新賦予的，導致會在購物車多一筆同樣的產品，forEach也無法使用 return 中斷，但是 if 執行後卻還是會執行 else 後的程式碼讓我很困惑，希望助教幫我解惑
這是原本寫的 gh-page https://youtingluo.github.io/vue3-week5/ 但發現會有不會疊加的問題 
原本這樣寫會有相同產品不累加項目的 bug，目前發現只有巧克力會有這樣的情況 QAQ
```
addCart(item, qty = 1) {
this.loadingStatus.isLoading = item.id;
const cart = { product_id: item.id, qty };
axios
.post(`${url}/api/${path}/cart`, { data: cart })
.then((res) => {
if (res.data.success) {
this.getCart();
this.loadingStatus.isLoading = '';
} else {
alert(res.data.message);
}
})
.catch((err) => {
console.log(err);
});
},
```
> 助教回覆： 助教這邊確認一下，同學想要的功能應該是，當商品 A 已經在購物車時，商品 A 又被加到購物車，在購物車的 商品 A 數量會自動增加。
> 如果助教上面理解正確，這部分本次 API 後端已經有做判斷相同商品，如果已經有在購物車，就會自動疊加的動作囉。
>
> 因此同學 GitHub Page 上原本的做法(沒添加判斷) 是正確的。
> 目前的問題是: 如果在購物車使用 +、 - 按鈕更新購物車數量，在點擊商品的添加購物車，購物車數量不會自動更新，而是在購物車上出現新的商品。
> 之所以會出現上述狀況，主要是因為 updateCart 這邊會用到 item.product_id 、 item.id 兩種 id ，而同學只設定一種 id，導致購物車資料異常哩。
>
> 還請同學把 +、 - 第一個參數調整成 item，並且在調整一下 updateCart 的 id 使用，這個是[調整後的範例](https://codepen.io/rider159159/pen/RwpYGEr?editors=1010)，同學可以參考看看，如果有問題歡迎在發問 :D
---
4. MM
Ryder助教好~
這是我的GitHub、GitHub-Pages，想請問products_w2.html加入需驗證的API時總是會跳出驗證錯誤，然而查看cookie有正確存取token，想請教發生什麼問題了>< 謝謝
https://github.com/0v0mm/Hex-Vue3/tree/main/hw2
https://0v0mm.github.io/Hex-Vue3/hw2/login.html
> 助教回覆：
> 同學登入的 url 有多一個 / 哩
> 把 login.js 第一行調整成:
```
const url = 'https://vue3-course-api.hexschool.io';
```
>就能使用哩。
>
---
5. Hua
第四週作業
Source
https://github.com/hua86430/week4-1
Page
https://hua86430.github.io/week4-1
助教好
這是我的code和page
想問一下為什麼會跳錯 但可以做動 因為是跳Vue的錯誤所以我也不知道是哪一行出了問題...
我是用新增商品元件的方法去做的 但就不知道問題出在哪
> 助教回覆： 目前助教測試不管是 GitHub Page、還是在本地端執行，登入、新增商品、編輯商品、刪除商品，使用上面方法都沒有跳錯哩，這邊還請同學詳細說明一下跳錯的情境，或是附上跳錯圖片，助教會在檢查的哩。
---
6. Alicia Lo
Ryder 助教您好,
這是我的codepen。
有關第五周作業， 目前在撰寫購物車列表遇到一個問題(JS:第149-166行; HTML:第96-99行)。
雖然我可以修改產品數量，但alert出來的訊息卻顯示 品項不存在(如附圖)。
不確定問題出在什麼地方，再麻煩助教解惑了，謝謝助教><
https://codepen.io/dkcyhyre/pen/abJamYP
> 助教回覆：這邊是因為同學 151 行 ${data.id} 後方多一個 } 符號喔，把它調整過來
```
const url= `${apiUrl}/api/${apiPath}/cart/${data.id}`;
```
>就能正常使用囉~
---
7. Echo Hui
Ryder 助教你好，
這是我用來測試VeeValidate的[codepen](https://codepen.io/echohuiecho/pen/PopdoZx?editors=1011)
有關第五週作業載入VeeValidate套件
我在載入VeeValidate套件時，發現如果以import {createApp} 形式載入Vue createApp，就會出現以下圖片的報錯
但如果把 import { createApp } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.9/vue.esm-browser.js'; 這句拿掉，以 const app = createApp({}) 掛載Vue，VeeValidate就能正常使用。請問為什麼會有以上情況呢? 謝謝助教。
> 助教回覆：這邊會警告，是因為同學引入兩次 Vue3 CDN 哩，有看到同學有在 setting 已經先引入一次 Vue3 CDN
```
https://unpkg.com/vue@next
```
> 而 JS 又在使用
```
import { createApp } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.9/vue.esm-browser.js';
```
>會導致 VeeValidate 找不到 全域 (window)的 Vue 套件因此跳出警告，因為 VeeValidate 會去載入 全域的 Vue 套件，因此 Vue 無法使用 ESM 的方式引入，所以要改成
```
const app = Vue.createApp({})
```
>這種方法來掛載 Vue 喔，以上同學可以理解看看 :D
>
---
(這邊只能由助教編輯，問題請到 thread 上詢問)
Sign in with Wallet
Connect another wallet