---
tags: Vue 直播班 - 2021 夏季班
---
# 7/6 線上 Slack 助教
## 今日助教輪班時間
Ryder：7/6 (二)
回覆時間：早上 9:00 -下午 1:00
## 發問規範
老師助教同學們好，**這是我的 Codepen**，我**原本預期**「JS 第 8 行會出現數字 8」，**但卻出現**「預期外的結果是 0」，想問下問題出在哪裡？
## 注意
1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. 以下問題區塊只能由助教自行增加
5. 助教會將回覆寫在下方問題區塊
## 問題
1.Iven ：
助教好：
這是[我的程式碼](https://github.com/Iven10252158/final_project)，我原本的路由規劃是，只有index跟about在前台的Home.vue之下，其他的頁面拉出來做，但是其實其他頁面的版型都差不多，一樣是上面有navbar，下面有footer，所以我想說那也把其他頁面都放在Home.vue之下，但是我的footer在npm run serve一進到畫面的時候會卡在最上面，在about的時候也會往上跑，因為我的NavBar一開始都是白色的，包含文字也是白的，要滑動一下才會變成顯示別的顏色，我希望呈現出來在網頁高度不夠時，我一樣能夠讓footer在最下面，請問助教這部分可以怎麼做，因為我看其他同學的程式碼，他們在front.vue大部分都是一個navbar跟一個footer，我是也想這樣做，但我的footer都會跑，，然後我簽換成手機版型時，會發現好像footer底部還有一點留白，這兩個部份想請助教 教教我，謝謝。
> 助教回覆： 助教這邊一一回覆你的問題
> 1. navbar 、 footer 跑版問題： 接下來都以 **關於我頁面** 為例。
> - This is an about page 這段文字之所以會往上跑，是因為同學 navbar 有使用 `position: fixed `，使用這段 CSS 後，該區塊會失去原本高度，已浮動方式呈現在畫面上。
> - 同學可以在 .about 新增 padding-top 的 css 這樣可以補上 navbar 原始高度
```
<style lang="scss" scoped>
.about{
padding-top: 74px;
}
</style>
```
> - footer 之所以會往上跑，這個問題在 [7/2 線上助教](https://hackmd.io/m4auldAPSZCXIVXKhzBXJA) 回覆過你囉，是因為 .about 本身沒有夠多內容，因此 footer 不會是至底狀態，會需要在 .about 去設定 min-height 語法，他才會完全至底哩。
> - 由於 navbar 、 footer 的問題，都是可以透過各個 .vue 檔去新增對應的 SCSS ，因此同學這邊確實能把其他頁面放在 Home.vue 下喔。
>
>2. footer 會有留白： 這個問題是因為 bootstrap 有對 h1 、 h2 等等，h 系列標籤，添加 margin-bottom ， 而同學 footer 也有使用到 h5 哩，因此可以在 footer.vue 中使用針對 h5 標籤去做調整。
```
<style scoped>
h5{
margin-bottom: 0;
}
</style>
```
>- 另外這邊提醒一下，同學下次提問時，可以多使用 Markdown 或是 多分段，助教這邊才會比較快速理解同學問題哩。
---
2.Tommy
助教好：
這是[我的程式碼](https://github.com/apple19890708/hexschool-homework/tree/main/hexschool-homework-week-5)，我預期在productPage.html做表單驗證，但是加上v-form 、 v-field 、 error-message後卻出現下面錯誤訊息，可以幫我看一下是為甚麼嗎？謝謝。
resolveComponent can only be used in render() or setup().
> 助教回覆：
> 這邊看同學 Vue 是使用 ESM 方式引入，使用這種方式引入， Vue 會在 VeeValidate 套件引入後才被引入，不過 VeeValidate 會是需要透過 Vue 本身來做一些設定，因此有使用 VeeValidate 的話 Vue 是無法用 ESM 方式引入，同學可以把 Vue 改成以 CDN 方法引入，詳細流程如下：
>- productPage.html 281 行 createApp 這段註解
>- productPage.html 286 行 使用 Vue.createApp
>`const app = Vue.createApp({`
>- 按照上面流程改成 CDN 引入 Vue 後，就不會跳出警告，驗證功能也能正確使用囉。
---
3.Ming
助教您好:
[github](https://github.com/ankazu/spirit)
我做了相關產品的元件(ProductAlike)，用在首頁、產品詳細頁、購物車。我弄了點圖轉址，但我發現頁面是有轉跳了。
1. 但畫面會停在元件的位置，而不是網站的最上方。
2. 還有在產品詳細頁點擊相關產品，網址路由不會更新。
謝謝助教
> 助教回覆：
> 1. Vue cli 的 Vue Router 在切換時， scroll 確實不會根據頁面切換而至頂，如果要達成這個功能可以在 router/index.js 設定
>
```
const router = createRouter({
history: createWebHashHistory(),
routes,
});
```
>這段新增 scrollBehavior() 方法
```
const router = createRouter({
history: createWebHashHistory(),
routes,
scrollBehavior() {
return { top: 0 };
},
});
```
>上面這個功能是 Vue Router 內建的，詳細可參考[官方文件](https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html)
> 2. 這邊看同學是在 ProductAlike.vue 使用 emit 將，將被點擊到的，相關產品 id 丟到父層，父層再透過 id 執行 ajax 因此更換畫面上的產品。
> 但這之間並沒有使用到任何 router 切換語法，因此網址路由在然不會更新，若要達成這個需求可以按照以下步驟：
> - ProductAlike.vue 14 行 click 不直接執行 $emit 事件，改為執行 methods 方法
> - 新增的 methods 方法中，先執行 `this.$router.push()` 再執行 emit 方法。
```
//ProductAlike.vue 第 14 行
<div @click="test(item.id)" class="alike_list_img">
//methods 新增 test方法
test(id) {
this.$router.push(`/product/${id}`);
this.$emit('go-page', id);
},
```
> - 有按照上面步驟調整後，點擊相關商品，scroll 會自動至頂，並且路由也能正確切換囉。
---
4.Erica
助教好，這是我的 [Repo](https://github.com/ericacadu/panya)
1.在前台 front > About.vue 頁面有取出文章，編輯器裡面有加入連結，但是在第 41 行取不到 a 連結的 dom，請問如果想要加上 target 屬性該怎麼修改呢？
2.目前分別在前台 Home.vue(首頁) / Products.vue(商品列表) / Product.vue(商品頁) 三個頁面有加上 scroll 監聽，想做出進入標準線後會 fade-in 的效果，嘗試過後覺得邏輯不太順寫起來怪怪的，特別是商品頁會失控，另外雖然有在 unmounted 取消監聽，但還是會跳出 Cannot read property 'offsetTop' of null 的錯誤
以上再麻煩助教幫我看看，謝謝
> 助教回覆：
> 1.這邊看同學指定的 a 標籤也是藉由 v-html 渲染出來，當我使用 v-html 將資料渲染成畫面時，並非瞬間也會需要一點時間哩。
> 因此同學可以使用 setTimeout 將 About.vue 42 、 43 行包裝起來，這樣就能抓到 a 標籤的 DOM 元素
```
setTimeout(() => {
const links = document.querySelectorAll('article a');
links.forEach((item) => item.setAttribute('target', '_blank'));
}, 100);
```
> - 然後也在補充一下 v-hmlt 這個語法渲染速度，會根據不同瀏覽器有不同情況，因此同學 setTimeout 的延遲時間可以自己抓一下喔。
> 2. 會發生錯誤主要是因為同學 Home.vue 、 Product.vue 的寫法，會讓 onScroll 方法變成閉包狀態，導致清除監聽時無法正確清除該方法，這邊建議將 onScroll 獨立成一個 methods 方法，就不會有問題囉。
---
5.Shino
助教好，這邊附上 [codepen](https://codepen.io/shiiinnooo/pen/bGWEMgL) 程式碼。
我使用老師第五週上課用的檔案在練習 vueLoading 套件，使用的檔案是 vue_loading-01.html，使用 cdn 載入 vueLoading，
但卻一直出現以下錯誤 ，再麻煩協助查看問題，謝謝。
> 助教回覆：
> 同學狀況跟今天第二問狀況一樣喔，主要是 Vue 使用 ESM 引入問題
> 使用 ESM 這種方式引入， Vue 會在 vueLoading 套件引入後才被引入，不過 vueLoading 會是需要透過 Vue 本身來做一些設定，因此有使用 vueLoading 的話 Vue 是無法用 ESM 方式引入，同學可以把 Vue 改成以 CDN 方法引入。
> 助教有將你的[專案調整成 CDN 方法引入的](https://codepen.io/rider159159/pen/RwVrBLb?editors=1010)，你可以參考看看。
---
6.Yiren
助教您好, 這是我的 [repo](https://github.com/Yiren-Liou/Aboriginal_Shop/tree/master/src)
在後台 admin > AdminProducts 使用 emitter.emit (206 - 208 行 )把指定參數傳出，在 EditProduct (333 - 337 行)使用 emitter.on 接收參數，預期在 EditProduct 可以成功接收到參數。
但發生以下兩個情況:
1. 第一次觸發 emitter 事件，emitter.emit 有成功觸發但 emitter.on 沒有成功觸發。
第二次觸發 emitter 事件，emitter.emit 和 emitter.on 才有成功觸發，想請問為甚麼第一次 emitter.on 沒有成功觸發?
2. emitter.on 成功觸發後，this.readonly 有成功賦予新的值 ( 335 行 )，但在 337 行的 console.log 印出來卻是未修改前的值，是表示其實 this.readonly 並沒有成功賦予新的值嗎?
再麻煩助教查看，謝謝助教~
> 助教回覆：
> 這邊 1、2 問因為原因是相同的所以一起回覆
> - 同學 emitter 設定是正確的，不過 AdminProducts.vue 的 emitter.emit 發送到 EditProduct.vue 的 emitter.on ，這之間網頁會需要經切換路由才會被啟用。
> - 如果是這種需要切換路由，才啟用 emitter 來接收的狀況，emitter 在處理資料上就會相對不穩定，這是 emitter 本身的限制哩。
> - 要達成同學的需求，會比較建議在 AdminProducts.vue 、 EditProduct.vue 的父層 Layout.vue 新增一個變數，並透過 props 、emit 的方法來去處理狀態切換。
> - 同學可以把 <router-view> 看成一個元件， 在上面使用 emit 事件來讓子層去切換 Layout.vue 的資料哩。
>
> - 另外補充一下 Layout.vue 中 `from '@/methods/emitter'` 應該是大寫的 `from '@/methods/Emitter'` 才對喔
---
7.Jordan_Tseng：
助教好，想請問關於文字，因為我的網頁有一些像是職位介紹、申請內容，這些如果想要他斷行斷的好看，是不是就是要使用文字編輯器？像文章一樣？請問六角建議是使用哪個套件？這個嗎？課程中好像沒有在針對這個做介紹？
> 助教回覆：
> - 是使用文字編輯器沒錯，不過文字編輯器的原理就是在要換行部分，插入 `<br>` 標籤。
> - 並且要呈現的畫面，要需要使用 v-html 來做渲染。
> - 群組中也有同學提出[這個問題哩](https://hexschool-share.slack.com/archives/G01GTT66PS6/p1624808651318700?thread_ts=1624807462.318300&cid=G01GTT66PS6)，另外下面同學也有正確回覆哩。
> - 文字編輯器部分可參考，第七週的[官方範例](https://github.com/hexschool/live-vue3-dashboard/blob/main/src/components/ArticleModal.vue) ArticleModal.vue 就有使用到哩。
---
8.圈圈
助教您好，想詢問製作前台單筆文章頁時，是否需要再把 api 取得的 content （帶有 HTML 標籤）重新整理成純資料，再放到畫面上？還是直接用 v-html 就可以了XD （順便說一下我使用的文字編輯器是 ckeditor）
> 助教回覆：
> 可以直接使用 v-html 來做渲染哩，因為同學使用文字編輯器，將文章儲存到後台 API 時，他就是以純資料形式被儲存，因此後面 API 回傳資料時，可以直接用 v-html 就做渲染動作哩。
---
9.moitw
助教好～
在後台 coupon 調整產品的 is_enabled，API 回來出現 is_enabled 型別錯誤 使用 typeof 觀察是 number , 而從表單取得的是 string ，但是在元件裡的 Data 裡 預設值是 is_enabled = 0 (number) ，想知道是怎麼轉型別？
確定的是 進 API 需要 Number 型別，但 input 得到的字串在哪裡該轉型別 Number ?
先謝謝～
[程式碼](https://github.com/tsuifei/vue-galerie/tree/main/src)
[頁面](https://tsuifei.github.io/vue-galerie/dist/#/login)
> 助教回覆：
> 這個問題可以參考，第七週[官方範例](https://github.com/hexschool/live-vue3-dashboard/blob/main/src/components/CouponModal.vue#L38)，就是在綁定 is_enabled 的 input 上，添加
```
:true-value="1"
:false-value="0"
```
>這樣這個 input 原本綁定的布林值，就會被轉為數字哩。
>老師在 [資料雙向綁定 v-model](https://courses.hexschool.com/courses/vue-2021/lectures/31156059)影片後半部其實也有使用到類似功能，同學可以參考看看哩。
---
10.Stacey Huang
Ryder助教你好,
[在上周直播](https://courses.hexschool.com/courses/vue-2021/lectures/33344694),老師示範了lazy loading, 在22:48 提到了換頁時,也會觸發滾動事件,所以離開元件時,在unmounted取消掉滾動監聽。
這段不懂,滾動事件是寫在ProductsLazy.vue上,為什麼在換頁到/porducts中也會觸發滾動事件?
謝謝助教!
> 助教回覆：
> - 這邊主要是因為 scroll 這個滾動事件是監聽在 window 之下的
> - 而 window 這個元素算是 JS 最底層的元素，即使在 Vue Cli 中進行畫面切換 winodw 這元素也不會被重置
> - 因此要換頁時若要取消以 winodw 為主的監聽事件，就會需要在 unmounted 取消喔
>
---
11.Lina Chen
老師助教同學您們好，
在我的頁面中，若在「首頁」跟「關於我們」兩頁間相互切換數次，在互相切換的過程時，會報出紅字錯誤(如附圖)，不確定報出錯誤的原因。
附上我的[頁面](https://lina-shu.github.io/brunch_project/dist/#/)及[程式碼](https://github.com/Lina-SHU/brunch_project/tree/master/src)
謝謝！~
> 助教回覆：
> - 這邊有將 About.vue HTML 部分， `<template>` 的下一層有在使用一個 `<dvi>` 將所有 HTML 進行包裝，這樣在切換關於我頁面就不會再報錯囉。
> - 這邊也建議同學其他 .vue 檔 HTML 也都使用上面規則進行包裝，以避免 Vue Cli 在渲染時，會因為 HTML 沒包裝好因此發生一些不知名的錯誤哩。
>
```
<template>
<div>
內容....
</div>
</template>
```
---
12.Iven
助教好：
這是[我的程式碼](https://github.com/Iven10252158/final_project)，
Q1 : 關於footer至底的問題，我有做修改了，想請助教幫我檢查一下，我是加calc的部分在關於我的頁面上，想問一下助教，主要的前台路由，只拿來放navbar跟footer的Home.vue檔是不是可以不用下calc語法讓footer至底？因為如果下了這樣其他頁面也會吃到這個設定，就算我用了scoped其他頁面也還是會吃到相關設定。（github上的scoped拼錯了，但我自己有實測過，在Home.vue上下calc讓footer至底，其他頁面也還是會吃到）
Q2 : 想問一下關於 "我的最愛“的問題，目前我的最愛是有存進localStorage裡面，但是我希望我的最愛的內容可以在NavBar上的書籤查看。我的想法是，書籤裡的品項應該是跟著localStorage的內容走的。
目前的狀況：因為push到myFavorite的是item.id，所以導致我在生命週期處，直接emitter.emit到Favorite.vue時，會只收到id，如果把push到myFavorite的是item的話，這樣點選產品時，愛心又不會產生高亮。
希望做出來的是，我的最愛裡可以保留原本加入的品項，從localStorage增加或移除商品，也能渲染在書籤上。
> 助教回覆：
>1. Home.vue 確實不用加 min-height + calc 來達成至底，在有需要的頁面在做這個 CSS 設定就行哩。 如果在 Home.vue 做這個設定，他子層的元件也都會吃到這個設定哩，所以比較建議在單 .vue 使用這個方法。
>2. 如果同學需要將我的最愛呈現在 navbar 這種 layout 上，會比較建議儲存完整的 商品資料，而非商品 id 。 而在商品列表中，愛心顯示的問題則可以使用 ，我的最愛資料 和 全部商品資料 的 id 進行對比，在根據對比狀況顯示不同愛心樣式，詳細可參考[這個學長、姐的專案](https://ashley-yu.github.io/OwnSpace/#/product_list)，因為是 vue2 部分結構稍有不同，不過 localStorage 判斷不會差太多喔，另外也附上他的[ GitHub repo](https://github.com/Ashley-yu/OwnSpace)
---
13.Fred Chang
助教您好, 這是我的[程式碼](https://github.com/fred8196/Vue-Week7)及[頁面](https://fred8196.github.io/Vue-Week7/dist/#/Login)，想請教兩個問題:
1. 在Login.vue 的90~98行，原本是想說在已經登入過的情況下，可以直接轉跳到Dashboard.vue頁面，但是會出現附件影片那樣，驗證不成功且無法轉跳回login頁面，想詢問該如何避免此問題。
2. 在打開modal的時候，console log時不時會出現如附圖的錯誤，但不是每一次都會，不曉得是哪邊出錯。
還請助教協助，謝謝~
https://hexschool-share.slack.com/files/U01HKMW1GHH/F02761JDDMK/login_error.mp4
> 助教回覆：
> 1. 這邊會發生錯誤原因是， 有名稱是 hexToken 的 cookie 但這個 cookie 中的值是不正確的，因此會發生以下狀況：
> - Dashboard.vue （admin 頁面）執行 this.checkLogin() 接者 因為 res.data.success 回傳是 false 所以執行 49 行的 else 判斷
> - els 中程式碼，會先執行跳出訊息的 swal 功能，接者在跳轉至 login 頁面
> - 到了 login 頁會執行 checkLogin() ， checkLogin() 會判斷式否有名稱是 hexToken 的 cookie ，如果有就跳回 Dashboard.vue （admin 頁面）
> - 接著 Dashboard.vue （admin 頁面） 就會因為 res.data.success 回傳是 false 所以執行 49 行的 else 判斷，就這樣上面的狀況不斷重複下去哩。
> - 要解決這個問題，就是不要在 login.vue 使用 checkLogin 的方法哩，只要導到 login.vue 都會需要重新登入，這樣就整解決同學發生的問題。
>
> 2. 這個問題助教這邊無法重現哩，從同學附圖來看發生錯誤的是 vue-loading 套件，而同學目前 modal 相關設定都沒有使用到 loading 效果，因此理論上不會發生錯誤才對，這邊麻煩同學記錄一下發生錯誤時詳細狀況哩
> - 如：是使用 編輯 or 新增開啟而跳出錯誤、跳出錯誤時的 loading 狀況等等
> - 有詳細紀錄後助教這邊會在幫你檢查這個問題喔
---
(這邊只能由助教編輯，問題請到 thread 上詢問)
Sign in with Wallet
Connect another wallet