---
tags: Vue 直播班 - 2021 夏季班
---
# 6/29 線上 Slack 助教
## 今日助教輪班時間
Ryder：6/29 (二)
回覆時間：早上 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)，我預期要在側欄選單做出點擊到該產品類別時，對那個類別做出active的效果，但是我試了好幾次，一直沒辦法成功，不曉得是不是跟我寫的篩選類別的方法有關，想請助教幫我檢查一下看可以怎麼修改。（相關的方法在products.vue的changeProduct跟gerProducts）
> 助教回覆： 這邊主要是 ：class 的判斷方法不太正確哩，助教這邊給同學一個調整方法：
> - Products.vue 新增一個變數，這邊先用 productValue
> - 在 changeProduct 中新增 `this.productValue = item` 讓商品列表名稱能夠賦予到 productValue 這個新變數，詳細 code 如下
```
changeProduct (item, index) {
this.typeProduct = this.products.filter((element, index) => {
if (item === element.category) {
// 新添加 code
this.productValue = item
return element
} else if (item === undefined) {
return this.products
}
})
```
> - 接者調整 :class 的判斷方法 ：
> `:class="{'bg-primary': item === productValue }"`
> - 這樣點擊商品列表，對應欄位就會正確顯示出高亮效果，不過全部商品目前是沒這個效果，同學可以按照上面邏輯，也為全部商品欄位，補上判斷方法，這部分交給同學練習囉。
>
> - 全部商品欄位也設定高亮的完整 code 則放在[此頁面中](https://codepen.io/rider159159/pen/eYWYMLN)，若同學真的無法做出來，可以參考看看（codepen HTML 中 就是完整的 Products.vue
---
2.leo naruhodou ：
助教好，[這是我的github連結](https://github.com/overactive1988/vue_lesson7_homework)
現在vue cli的環境下，我經常需要重複執行2次以上的
npm run serve或npm run build
而第一次通常都會出現如附圖的錯誤提示
ctrl + c 關掉後再重新執行一次，有時依然會再次報錯
有時則是會過關
我只知道好像是
AdminProductModal.vue
這份檔案中的
prop 設定有問題(whereProduct)
但具體是哪裡出問題我不太清楚
(這份版型原本是全域元件，在vue cli中我將它設為區域元件)
這邊可以求救助教要怎麼解決這個經常困擾我的error嗎qq...
> 助教回覆： 目前助教這邊載下來運行，確實會出現同學提到的 whereProduct props 相關錯誤，如圖：
> 
>
> 之所以會發生上面錯誤，主要是因為 ESLint 有限制，無法直接使用 props 進來的值，詳細可參考官方文件： https://eslint.vuejs.org/rules/no-mutating-props.html
>
> 還請同學在 vue data 新增一個變數，使用 watch 監控該 whereProduct ，並將 whereProduct 的值 賦予給新變數使用，並將 AdminProductModal v-model 中有使用到 whereProduct 都替換成新變數使用哩，助教這邊調整後 Eslint 就不會出錯哩。
```
data() {
return {
modal: "",
newProduct: [],
};
},
watch: {
whereProduct() {
this.newProduct = this.whereProduct;
},
},
```
> 不過同學提到的 需要重複執行2次以上的 `npm run serve` 這部分助教確實無法重現（助教這邊是，只要專案有錯誤沒改，就會一直噴錯），這邊先請同學調整完上面的 ESLint 的錯誤，在測試看看是否正常哩。
---
3.LiShang :
[這是我的github](https://github.com/Li-Shang-tw/vuecliAdmin)(這次確定都有上去了)。 我這次的問題是 我的新增按鈕與 分頁按鈕會出現兩次(我的程式碼只有寫一次而已，我猜是渲染的問題。
> 助教回覆：這邊是因為同學的 Products.vue 的 HTML 沒有正確閉合喔。
> .vue 檔的 HTML 除了最外層 template ，在 template 下一層必須使用一個 HTML 標籤，將該 .vue 檔內容全部包起來。
> 以目前同學的 Products.vue 來說，就必須把第 6 行的 `</div>` 移至 36 行 `</template>` 上方。
> 有正確調整過來就不會重複渲染囉，如圖：
> 
> 另外最後也提醒一下 modifyModal.vue 因為沒有 temporaryProuct 的相關資料，因此也會發生錯誤，同學要記得補上喔。
---
4. 陳sam
助教你好~，目前作業上遇到圖片路徑問題，我照第二筆下方這樣打，是完全顯示不出來，後來google參考了[這篇文章](https://www.twblogs.net/a/5d669753bd9eee5327febf09)，但還是看不太懂，只知道照著做圖片顯示得出來。想理解一下這觀念不足，還有對require不是很熟悉。:dizzy_face:
> 助教回覆：這邊有一個觀念可以先理解一下，使用 Vue Cli 製作專案時，所有的程式碼 HTML 、 CSS 、 JS 都會經過 Vue Cli 的包裝。
>
> 而對 Vue cli 來說同學第二段中的小老鼠，就只是一個字串，而不是路徑，因此顯示不出來。
> 而在第一種寫法中是使用 `${}` 字符串 功能來帶入 require 功能，而 require 又在綁定了圖片路徑，因此才能使用哩。
>
> 這邊也補充兩點：
> - require() 算是 webpack 的方法，是用來指向特定路徑。
> - @ 小老鼠則是 Vue cli 用來指向 src 的一種縮寫方法，[詳細可參考](https://hsiangfeng.github.io/vue/20190510/86469050/)
>
---
5.Iven :
助教好：
第二問！[這是我的程式碼](https://github.com/Iven10252158/final_project)，我想做搜尋的功能，但是好像不能使用跟資料篩選的選單一樣的typeProduct，這樣搜尋的功能做好了，選單列表就不能用了，想請助教幫我檢查看看程式碼可以怎麼修改。（檔案在components>ProductCard.vue裡)
> 助教回覆： 這邊要先釐清同學希望的功能，一般來說這種前端搜尋功能，不太常會跟商品分類功能放在一起，主要是因為這兩個功能使用上其實非常接近。
> 如果同學是想參考，這位[同學的專案](https://xin1994112.github.io/fruits/#/)，那麼同樣的會需要把搜尋部分改成一般 methods 方法，並且會需要使用到較為的複雜判斷，去做調整，詳細可以直接[參考同學的 code](https://github.com/xin1994112/fruits/blob/master/src/views/frontend/Products.vue#L54)
---
6. Ming :
助教你好，這是[我的程式碼](https://github.com/ankazu/spirit)。我在產品列表做了次選單，但選取後該怎麼讓 Pagination 隱藏，還有想讓標次選單上有 active class 該怎麼做，用 :class 來寫判斷嗎? 最後還想請問，我這樣寫的次選單，有沒有什麼問題(程式碼之類的)。 謝謝助教。
> 助教回覆： 助教這邊一一回覆你的問題：
> 1. 這邊推測同學是想點選 選單後 Pagination 隱藏，在全部商品 Pagination 開啟，是的話請跟者以下步驟：
> - 在新增 Products.vue data 中新增一個變數，假使用目前叫 pageShow
> - 在 filtercategory() methods 中將該變數改為 false
```
filtercategory(e) {
this.pageShow = false;
...
}
```
> - 在 getProducts() methods 中將該變數改為 true
```
getProducts(page = 1) {
this.pageShow = true;
...
}
```
>- 44 行 v-if 中新增` && pageShow` 的判斷
```
<div class="page" v-if="products.length <= 10 && pageShow">
```
> 這樣就能達成同學需求喔。
>
> 2.是使用 :class 來做判斷喔，製作方法和 Pagination 中的作法類似，另外 本日第一問 Iven 同學的問題類似喔，可以參考看看
>
> 3.目前來看有一個問題喔，同學重複的 product_category 並沒有做處理哩，可以使用 filter + indexOf 來製作不重複的列表，再來給 v-for 做渲染，詳細也可參考 Iven 同學 [ProductsCard.vue ](https://github.com/Iven10252158/final_project/blob/main/src/components/ProductsCard.vue#L95) 95 - 97 行過濾方法。
>
---
7. kaiaChun
助教好，[這是我的 Github](https://github.com/kaiachun/PetPal) ，目前卡在將VueCLI推到GithubPages上，東西都有推上去，在本地端測試也成功，但無法在GithubPages上顯示，想請問有哪裏要修改嗎?
> 助教回覆：
> 這邊是因為同學 router/index.js 中 component: 後方會需要使用 `() =>` 箭頭函示。
> 同學 router/index.js 6 、 15 、 20 、 31 行都沒使用上，還請同學像 11 、 26 行帶上箭頭函示喔。
> 補上之後助教看就是能夠使用的哩。
>
---
8.leo naruhodou
助教好，[這是我的github連結](https://github.com/overactive1988/vue_lesson7_homework)
現在vue cli的環境下，
由於bootstrap5並沒有將
position-absolute之類的class對應responsive
我想做的事情是
將現有的class
position-absolute
更改為支援響應式的
position-sm-absolute
在看了這份文件後，
已經修了整整一個下午
還是無法實現
position-sm-absolute
，想請問在bs5裡面
這邊究竟應該要如何設定才能正確達成我想要的需求呢qq
(本次新增的code \src\assets\css\helps\_utilities.scss )
> 助教回覆：
若要達成同學效果，可以先複製一份
`node_modules/bootstrap/scss/_utilities.scss`
到同學的 assets/css 中，而複製下來的 _utilities.scss 第 55 行就有 "position" 的設定同學可在這裡直接插入 responsive: true,
```
"position": (
property: position,
responsive: true,
values: static relative absolute fixed sticky
),
```
> 接者在 common.scss 引入 utilities.scss ， position-sm-absolute 就能使用了
```
@import "~bootstrap/scss/functions";
@import "./helps/variables";
@import "~bootstrap/scss/mixins";
@import "./utilities";
// sass 對應node_modules
@import "~bootstrap";
```
>
> 另外這邊提醒一下，如果同學只是要新增一個 scss 斷點，可以直接新增 scss 檔案接著在使用上需要的 scss 的語法。
> 之所以會有這個建議，是因為直接調整 $utilities 這種操作方法，會編譯出較多的 scss 語法，以同學的需求來說就是新增以下 scss :
```
@media (min-width: 576px){
.position-sm-absolute {
position: absolute !important;
}
}
```
---
9.kaiaChun:
助教好，這是我的[github](https://github.com/kaiachun/PetPal)，我在本地端測試都正常，推到 github Pages 查看 https://kaiachun.github.io/PetPal/dist/index.html#/ 卻無法顯示，想請問為什麼會這樣？還是我有什麼地方沒有做呢？
> 助教回覆：
助教在這邊的第七題有回覆你囉，需要調整 route/index.js 中 component: 後方會需要使用 `() =>` 箭頭函示。
同學 router/index.js 6 、 15 、 20 、 31 行都沒使用上，還請同學像 11 、 26 行 component: 後方帶上箭頭函示喔。
> 調整完畢還需要重新 npm run build 並再次上傳喔。
---
10. 陳sam:
助教你好~我目前想在cli使用vue-awesome-swiper，我從官網跟著弄，一直出現抓取不到問題。不知道是因為我少安裝什麼嗎?還是他不支援vue3:dizzy_face:
> 助教回覆：
> vue-awesome-swiper 是不支持 Vue3 的喔，這邊可以[參考這篇 GitHub 的問題](https://github.com/surmon-china/vue-awesome-swiper/issues/726)，開發人員有來回覆:
> - 因為最新版 Swiper 有自行支援 Vue3 的開發，因此 vue-awesome-swiper 有可能不在更新哩。
> - 另外 swiper Vue3 操作，可參考他們的官方文件: https://swiperjs.com/vue
---
11. Jordan_Tseng
老師、助教好，我作業卡關在cropper.js，這是我的程式碼，測試企業資料，運作上可以運作，但是效果常常怪怪的：
1.我想把裁切區域變大，我在瀏覽器的檢視原始碼有把高度加大，但是用 vscode 就加不了。
2.關閉打開，圖片會跳一下，很奇怪。
3.另外送出表單後，再次上傳新的企業，modal裡面圖片沒清掉，時好時壞。我也有設定清除cropper 。
4.最後我不知道是我電腦問題？移動裁切範圍很卡。
最後一個是送出表單前的處理，我把兩個地址資料合併user.address，但是他卻變成/n。只是字串合併我用 ` `` ` 應該很簡單，但怪異。已經迷惘了～
> 助教回覆：
>- 最後一問部分主要是 雙向綁定的 xxx.company.companyAddress 最後的 .companyAddress 大小寫不相同喔。
> v-model 是使用 CompanyAddress 首字大寫
> 不過 vue data 中使用 companyAddress 首字小寫
> 而 methods 中使用 CompanyAddress 首字大寫
> 統一後就沒問題囉。
> 卡斯伯回覆：
> 1. 裁切區域你已經有定義比例了，所以空間會被限制勒 （aspectRatio: 16 / 9）
> 2. 哪個按鈕的關閉及圖片呢？
> 3. 你可以利用 watch，確保資料有更新時重新將 modal 內資料清空
> 4. 因為裁切過程都需要重新產生 base64，所以效能上會很差是正常的勒
> 能的話盡可能附上圖及標示，比較清楚你所指的位置喔
---
12. 小妤
老師您好，這是我的 [code](https://github.com/peggyted0129/vue3_hex_0625/blob/master/src/views/front/OrderBuying.vue)。在 src/views/front/OrderBuying.vue 頁面 (45-111行) 表單驗證部分， 姓名、手機、email、地址錯誤驗證訊息.....等都沒有效果，請老師幫我看下哪裡有問題好嗎 ??
> 助教回覆：
這邊看同學 OrderBuying.vue 46 行有使用 `:validation-schema="schema"` ，這個功能算是將驗證規則重新定義，如果有使用到這個功能，原本預設的驗證規則，都會需要另外再做設定喔。
>
>詳細可參考[官方文件的這段範例](https://vee-validate.logaretm.com/v4/guide/global-validators#schema-validation)，同學範例中 email 、 地址 這些需要驗證的欄位，都會需要在 schema 中做規則的設定喔。
---
13. sec
助教好, 在第7周的范例的订单和优惠券页面点击删除的时候 modal 有跳出来但是 modal 内是没有相关产品的资讯的 ?
> 助教回覆： 是有資料的喔， DelModal.vue 有使用
```
props: {
item: {},
},
```
>來接收優惠券、訂單頁面傳來的資料，不過訂單頁中的每筆訂單資料，是沒有 `.titile` 屬性。
>因此在訂單頁，點刪除 button 時，刪除 modal 上不會顯示該標題，不過實際上 DelModal.vue 還是有相關資料喔。
---
14.
> 助教回覆：
---
(這邊只能由助教編輯，問題請到 thread 上詢問)
Sign in with Wallet
Connect another wallet