---
tags: Vue 直播班 - 2021 夏季班
---
# 7/8 線上 Slack 助教
## 今日助教輪班時間
Ryder：7/8 (四)
回覆時間：早上 9:00 -下午 1:00
## 發問規範
老師助教同學們好，**這是我的 Codepen**，我**原本預期**「JS 第 8 行會出現數字 8」，**但卻出現**「預期外的結果是 0」，想問下問題出在哪裡？
## 注意
1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. 以下問題區塊只能由助教自行增加
5. 助教會將回覆寫在下方問題區塊
## 問題
1. Wendy Li ：
哈囉 助教、老師好:
想詢問在結帳完畢後, 在切換任何一個頁面的時候
結帳的頁面不會消失, 新的頁面卻會在下面出現
想詢問這是甚麼樣的原因....?
有查詢到console.log忽然會跳出這個錯誤訊息
但是一直找不到錯誤訊息
麻煩助教、老師撥空幫忙確認了 謝謝!
路徑: [程式碼](https://github.com/rockayumitw/vue-week7/tree/main) | [頁面](https://rockayumitw.github.io/vue-week7/dist/#/home)
> 助教回覆：
> 這邊在同學結帳第三步驟時，確實會發生錯誤，這個問題主要是非同步的問題哩。
> - 同學可以在 Order.vue 18 、 55 行的 tobody 添加 `v-if="this.order.id !== undefined"` 的判斷，以防止非同問題。
> - 助教這邊測試調整過來後，在 Order.vue 中切換網址就不會有問題哩。
> - 因此這邊推測是發生 非同步問題（跳錯） 後， Vue 在渲染畫面上不穩定，因此出現這個狀況，有正確修正非同步問題就能正常使用囉。
>
---
2. Circle
助教好：
這是我的[程式碼](https://github.com/CircleLin/Vue_final)和 [頁面](https://circlelin.github.io/Vue_final/dist/#/home)
我在商品細節頁面中有放相關產品，相關產品的呈現是用跟產品列表一樣的產品卡片元件。
在產品列表這些卡片可以順利進入細節頁，但在細節頁點卡片想換到該商品時，網址有更換但頁面沒有換成我點的相關產品細節，想請助教協助看看原因，謝謝!
> 助教回覆：
>- 這邊主要是因為 同學從 `products/:id` 頁面切換至 `products/:id` 頁面，由於只是更換路由，但使用的是相同元件，因此在做這種切換時，Vue 認為是相同元件，因此不會讓該元件經過完整的生命週期。
>- 因此同學使用相關產品切換網址，只會切換網址而商品不會被切換，因為生命週期沒更新，Detail.vue 中的 mounted() 自然沒被觸發。
>- 要解決這個問題，可以把 ProductCard.vue 的 router-link 改為執行 methods 方法。
>- 新增的 methods 方法中，先執行 this.$router.push() 再執行 emit 方法。
```
// ProductCard.vue 切換連結 HTML
<a @click.prevent="test(product.id)" class="p-img mb-3">
<img :src="product.imageUrl" :alt="product.title" />
<div class="p-detail"></div>
</a>
// ProductCard.vue 新增 metods
test(id) {
this.$router.push(`/products/${id}`);
this.$emit('get-product');
},
```
> - 最後在 Detail.vue 幫 card 元件補上 getProduct 的 emit 方法
```
<card :product="item" @get-product="getProduct"></card>
```
> - 按照上面調整，切換連結同時就由 emit 觸發 getProduct 就能將商品更新哩。
---
3. Tori
助教你好，這是我的
[Github](https://github.com/aer456987/natural)
[github pages](https://aer456987.github.io/natural/dist/#/products)
我希望在清空我的最愛內容時，視窗關閉後，線上商城/單項商品的愛心可以取消被選取得狀態，但想不出來有甚麼方式可以解決這個問題？
> 助教回覆：
這邊看同學的寫法，我的最愛資料儲存、刪除上是正確的， 但是再將畫面渲染資料的部分，其實只會再開啟頁面瞬間，根據資料進行狀態判斷，後續畫面更新，資料也都不會吃到哩，目前同學專案中，不管是點擊 清空收藏 或是 單一商品更新，我的最愛部分都無法同步哩。
>
>目前同學寫法確實無法，達成這個需求，會建議同學參考[這個範例](https://rider159159.github.io/localstorage-product/#/products) 去做 localstorage 相關設定。
> 實際相關設定就是在 components/frontend/navbar.vue 以及
views/fronted/UserProducts.vue 這兩個頁面中喔。
這邊也附上 Github repo : https://github.com/rider159159/localstorage-product
---
4. 小妤
老師您好，請問若想實現 "記住我的帳號密碼" 功能....，通常實作是用甚麼方式呈現呢 ?? 請問是使用 cookie 紀錄的方式或是 localStorage 紀錄的方式嗎 ??? 另外，我的第7關任務作業是暄雯助教批改的，對他的意見有些疑問 (已回覆在關卡任務中)....但已經兩天了，他都沒回覆，這樣我的作業也不知道該如何進行下去....，有甚麼方式可以請他回覆的嗎 ??
> 助教回覆：
>- 記住我的帳號密碼，這功能確實是由操作 cookie 將帳密存在 localStorage 、 cookie 中沒有錯，[詳細可參考這篇文章](https://www.twblogs.net/a/5c834bcbbd9eee35cd69a0ef)，
>- 不過一般網站也會對存進 cookie 的密碼做一些加密動作，讓密碼無法直接被看，以避免一些資安問題。
> - 關於作業回覆，六角助教 這邊都是按照同學提交順序進行回覆，由於目前作業量較大，還請同學學耐心等候哩，這邊有通知 暄雯 助教。
---
5.Iven ：
助教你好：
這是我的[github](https://github.com/Iven10252158/final_project) & [github pages](https://iven10252158.github.io/final_project/dist/#/)，有關路由的部分想請助教協助
Q1: 我的後台頁面跟登入頁面都會吃到前台的NavBar，但我檢查路由設定沒有問題，想請助教幫忙，有什麼辦法可以讓後台跟登入頁面不要吃到前台的NavBar？謝謝助教！
> 助教回覆：
這邊看是因為同學，最外層 App.vue 有引入 navbar.vue （offCanvas） 因此後台也才會有 navbar 樣式哩，這邊把 App.vue 的 offCanvas 取消後就正常囉。
---
6.moitw
助教好～
這是我的程式檔和頁面，主要問題在coupon的Modal
[程式碼](https://github.com/tsuifei/vue-galerie/tree/main/src)
[頁面](https://tsuifei.github.io/vue-galerie/dist/#/login)
在 Coupons 列表點擊修改會彈出couponModal 可以修改，正常情況按右下「確認」後資料有儲存，然後 Modal 本身的 hideModal() 方法關閉視窗，但視窗無法關閉，結果助教在昨天幫我找到額外的錯XD，但是 Coupons.vue 的 hideModal() 方法還是沒有執行。
在 152,153 這兩行，印不出來`this.$refs:${this.$refs}`
console.log(`this.$refs:${this.$refs}`)
this.$refs.adminCouponModal.hideModal()
要如何印出來看執行狀態呢？
想麻煩助教看是哪裡寫錯，謝謝～
> 助教回覆：
> 這邊看 hideModal() 是能使用的哩，在後台優惠券頁面不管是新增、編輯優惠券按下確認後， modal 確實都會被關閉喔。
> Coupons.vue 152 行的
```
console.log(`this.$refs:${this.$refs}`)
```
>因為同學用 `` 字符串包住關係會導致 上面的 console.log 結果會是
`this.$refs:[object Object]` 的字串，如果使用
```
console.log(this.$refs)
```
>就能正確顯示 ref 這個物件，裡面也會發現 adminCouponModal 這個元件喔。
---
7.圈圈
助教好！
我在購物車套用優惠碼時，出現「優惠碼有在後台登錄，卻說找不到優惠碼」的問題。用 console.log 測試 props 的 code 參數，有正確從[子元件](https://github.com/vvvvvvii/tasteof/blob/main/src/components/ConfirmCart.vue)（ 108 行）傳到[父元件](https://github.com/vvvvvvii/tasteof/blob/main/src/views/Cart.vue)（ 182 行）。測試不論是過期或未過期，都顯示找不到優惠券。不知道是我哪邊寫錯了？還請助教再幫我看一下，謝謝！
> 助教回覆：
這邊看 emit 方法其實是沒問題的，checkCoupon 之所以無法正確使用主要是因為，同學參數設定上沒有正確哩，最主要是參數必須是兩層物件，目前同學只有使用到一層，同學可以按照下面範例進行調整，助教有把 checkCoupon 參數替換成 item 方便你辨識哩。
```ja
checkCoupon(item) {
const CouponData = {
data: {
code: item,
},
};
this.$http
.post(`${process.env.VUE_APP_API}/api/${process.env.VUE_APP_PATH}/coupon`, CouponData)
.then(()=>{
.....
})
```
> 有按照上面建議調整 checkCoupon 方法就能使用囉。
---
8.Stacey Huang
這是我的[Github pages](https://darahuang.github.io/starlightselection/#/products)與[Github repo](https://github.com/Darahuang/starlightselection),Products.vue中的line 237-240中,除了item.category.match(this.category)自己多增加了篩選條件item.category.match(this.searchInput) ,但按下列表中的選項或是在搜索框輸入文字都無效。
但若是使用line230-236的方法,就可以正常使用。
想請問若是多條件的篩選,是否使用判斷式比較適合?
此外,有加入搜索框輸入關鍵字來篩選行程,我在v-model加入lazy修飾符,不曉得這樣是否可以降低使用者頻繁輸入所帶來的影響,原本想使用lodash的debounce功能,但搜尋且嘗試後,還是不大會用。
另外,在Product.vue中,我有嘗試做近期商品瀏覽在line104-108中,並用watch監視在line126-132,最後用v-for將資料顯示出來,在line41-45
這段我不是很確定是否正確,而且做完這個功能之後,覺得載入單頁產品頁的速度變慢,不曉得是否跟此功能有關。
以上,再麻煩助教了,謝謝!!
> 助教回覆：
> 1. 同學理解沒錯喔，較複雜判斷確實無法直接使用 computed 完成喔，這種兩種以上判斷建議使用 if 或是 switch 判斷式達成喔。
> 2. 添加 .lazy 修飾符確實能降低效能，但除非同學資料有上百比，不然這種搜尋功能其實以目前電腦、手機來說效能上都是可以接受的，以目前資料量來說可以不用擔心效能問題。（真正實做時如果要搜尋數量較多的資料，通常也都會跟後端配合）
> 卡斯伯回覆：
> 3. 我這邊檢視是沒有效能影響的問題，你也可以在 handler 中加入 console，其實它並不會一直觸發並影響大幅運作喔，或者你也可以私訊我說明變慢的感覺在哪勒
```
handler() {
console.log('handler');
localStorageMethods.save('browserRecord', this.myBrowserRecord);
},
deep: true,
```
---
9.Iven
助教好：
這是我的[github](https://github.com/Iven10252158/final_project)&[github pages](https://iven10252158.github.io/final_project/dist/#/)，我的最愛功能還是有一點小問題想請助教幫忙。
Q1 : 有時候我打開vue CLI都會跳出這個錯誤，但也不知道是為什麼？想請助教幫我看一下這個錯誤是什麼意思？為什麼會跳出這個錯誤？ (edited)
> 助教回覆：
目前助教這邊不管是本地，還是 GitHub page 都無法重現同學畫面中的錯誤，圖中的 sock.js 是 Vue cli 的依賴套件之一，助教這邊推測，是同學某些操作錯誤、或是 code 有不正確的地方，導致 Vue cli 不穩定因此噴出這個錯誤。
> 詳細還是會要請同學紀錄，發生這個錯誤的時機點，以及發生錯誤前是怎麼操作的，這一些情境喔。
> - 我的最愛，目前看商品頁操作是正確的，不過在 navbar （Canvas.vue） 上操作，會無法同步到商品頁喔。
> - 如果要讓商品頁和 navbar 上的資料同步，在新增、刪除 localstorage 的事件後，可以使用 emitter 去呼叫對方，重新獲取 localstorage 的資料哩
> - 假使在 navbar 操作， navbar 事件結束時就用 emitter 呼叫商品頁，讓商品頁重新獲取 localstorage。
> - 反之在商品頁操作時，在事件結束時使用 emitter 呼叫 navbar 重新獲得 localstorage
>- 同學可參考[這個範例](https://rider159159.github.io/localstorage-product/#/products) 去做上面提到的互相呼叫的相關設定。
> - 實際相關設定就是在 components/frontend/navbar.vue 以及
views/fronted/UserProducts.vue 這兩個頁面中喔。
> - 這邊也附上 Github repo : https://github.com/rider159159/localstorage-product
---
10.Jordan_Tseng
助教好，這是我的[頁面](https://jordan-ttc-design.github.io/vue-2021-finalwork/dist/#/products-list)、[程式碼](https://github.com/Jordan-TTC-Design/vue-2021-finalwork/blob/master/src/views/front/ProductsList.vue)。想請問助教關於swiper的部分，一直怪怪的，我在本地開發時，切換頁面的設定就ＯＫ，然後到github page就跑掉，而且如我影片附上的，常常重新整理就是變成一整條，但是用檢視就變回正常三個，我明明設定也是設定三個。另外想問助教，我本來嘗試把siwper加上row和col的class，但是設定上padding好像就不對，最後還是改回用官方設定方式。是不能合併使用嗎？
https://hexschool-share.slack.com/files/UV6LX0PPS/F027GLM283C/_____________2021-07-08_______11.55.18.mov
> 助教回覆：
>
> 1. 這邊看本地端也會有 swiper 跑版狀況哩，會出現這個狀況主要因為非同步的問題。
> - Swiper 的 goodJobList 資料，最一開始還是藉由 ajax 獲得，自然會有延遲。
> - 而 ProductsList.vue 中 swiper 會在獲得一筆資料後就馬上渲染，因此會發同學 swiper 跑版問題。
> - 解法如下：
> - 在第五行 swiper 新增一個 v-if 判斷
> - vue data 新增判斷的變數並預設是 false 的布林值。
> - 在 goodJobList 獲得全部資料後 302 行，將該變數改為 true。
```
// swiper 新增 v-if 判斷
<swiper
v-if ="lock"
...>
//新增變數
lock: false,
//goodJobList 獲得全部資料後，將判斷變數改為 true
arr.forEach((i) => {
this.goodJobList.push(temGoodJob[i]);
});
this.lock = true;
```
> - 按照上面調整 swiper 就能正確渲染囉
> 2. 建議不要混用，因為 swiper 套件，每個區塊都有設定 CSS，而 BS 的 row 和 col 也都有設定不少 CSS ，如果混在一起使用， CSS 肯定會有衝突喔。
---
11.Fred Chang
助教好，這是我的[程式碼](https://github.com/fred8196/Vue-Week7)，想請教兩個問題：
1.在CouponModal.vue的第124行，這行是參考範例程式碼放上的，但因沒有這行也能正常使用外層的方法，想知道這行的用意。
2.在Coupon.vue的第55行，這邊參考範例寫:item:"tempCoupon"，但在DelModal.vue內的props並沒有名為item的參數能接收，為何還能正常運行呢? 還請助教解惑，謝謝~
> 助教回覆：
> 1. 確實沒有添加這行， emit 事件仍可使用，不過如果同學有使用較為嚴格的 eslint 的話， eslint 會針對這部分跳出警告哩，會有這個警告，主要還是讓開發者後續維護時，比較容易清楚資料流向。
>
> 2. 這邊 DelModal 雖然能夠開啟，但是他其實不能顯示任何 item 參數傳來的資料喔，如果同學有試者在 DelModal HTML 中插入任何 item 數值， console 也都會跳出警告跟錯誤哩。
>
---
> 助教回覆：
---
(這邊只能由助教編輯，問題請到 thread 上詢問)
Sign in with Wallet
Connect another wallet