--- tags: Vue 直播班 - 2021 夏季班 --- # 6/14 線上 Slack 助教 ## 今日助教輪班時間 hsin-yu：6/14 (一) 回覆時間：下午 1:00 -下午 4:00 ## 發問規範 老師助教同學們好，**這是我的 Codepen**，我**原本預期**「JS 第 8 行會出現數字 8」，**但卻出現**「預期外的結果是 0」，想問下問題出在哪裡？ ## 注意 1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖 ![](https://i.imgur.com/nHE3sOx.png) 2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖 3. 助教會依照 Slack 上的順序回覆問題 4. 以下問題區塊只能由助教自行增加 5. 助教會將回覆寫在下方問題區塊 ## 問題 1. **Lita**： 老師助教同學們好，這是我的 [程式碼](https://github.com/lita030/week03) ， 我的登入頁面輸入帳號密碼後可以跳到商品頁面，但進入頁面後console卻顯示API不存在，想問下問題出在哪裡？ > 助教回覆： > 可以試試看調整 getProducts() 的 productsApi 路徑（可以參考 [API 文件](https://github.com/hexschool/vue3-course-api-wiki/wiki/%E7%AE%A1%E7%90%86%E6%8E%A7%E5%88%B6%E5%8F%B0-%5B%E9%9C%80%E9%A9%97%E8%AD%89%5D#%E5%8F%96%E5%BE%97%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8)），`${this.apiUrl}` 後面需再加上 `api` 再接 `${this.apiPath}` 就會串接到正確的 API~ 助教你好，我試了但還是有問題@@ getProducts(){ const url =`${this.url}/${this.path}/admin/products`}與 getProducts(){ const url =`${this.url}/api/${this.path}/admin/products`} 兩種console還是都報錯，不知道問題在那裡 > 助教回覆： > 這裏看同學的 data() 這邊是用 apiUrl 和 apiPath > https://github.com/lita030/week03/blob/main/products_week3.js#L6-L9 剛剛測試 ``` const productsApi =`${this.apiUrl}/api/${this.apiPath}/admin/products` ``` 是可以正確串接 API 的，如果還是有錯可以在 network 那邊查看 Request URL 路徑是什麼（如下圖） ![](https://i.imgur.com/AXzs2a4.png) 助教不好意思又是我，我查看了request URL跟你的截圖一樣，也顯示200，但data的message都會顯示“驗證錯誤“or”您所查看的API不存在“@@沒辦法顯示商品列表 ![](https://i.imgur.com/tNZJy2x.png) ![](https://i.imgur.com/MWstPhK.png) > 助教回覆： > 如果回傳的 message 是 **驗證錯誤，請重新登入**，那可能會是登入帳號密碼有誤或是沒有正確取到 token，因為同學好像有更換 api path 可以檢查這兩個步驟看看~ --- 2. **Sean Wu**: 請問影片(加碼：第三、四週作業解說 - 上) 時間1:28:22，為什麼需要this.isNew = isNew？ > 助教回覆： > 這裏因影片中 openModal() 這個函式會在新增及編輯產品時開啟 modal 使用，因此會透過傳入參數 openModal(isNew) 來判斷要執行新增產品或編輯產品，傳入的 isNew 值會再賦予到元件資料的 isNew，將值更新到 this.isNew，其他 method 或 html 畫面操作的部分就可以使用到 data 的 isNew 可以理解看看～若有不清楚的地方歡迎留言在 slack 發問訊息的 thread 提問喔! --- 3. **Carrie** 老師助教同學們好，這是我的 [GitHub Res](https://github.com/echocarriet/problem0614) 。 我原本預期「引入 BS 卡片元件」，卻在終端機出現「ERROR : Failed to compile with 1 error」，但在 Home.vue 引入按鈕元件是可順利顯示於畫面上，下方附上卡片操作順序與錯誤訊息圖 ( 有依照錯誤指示跑 npm install —save ，但一樣跑出相同的 ERROR 訊息 冏 )， 想請問問題出在哪裡？感謝助教 ! ![](https://i.imgur.com/SRM97Lo.png) * 路徑 : src / assets / 新增 all.scss，輸入 @import ‘~bootstrap’; * App.vue 檔案 → `<style>` 內加入 @import ‘./assets/all’; * 於 components 資料夾新增 Card.vue 元件 * About.vue 檔案中把外部檔案載入 + 區域註冊。 > 助教回覆： > 這裏測試是在 import Card 元件時會出現此錯誤，引入路徑和檔名都是正確的，後來發現是 Card.vue 的 template 拿掉 > `<img src=“…” class=“card-img-top” alt=“…” /> `就可以正確使用 `npm run serve` 開啟了，可以嘗試看看! 助教你好， 我有把 Card.vue 內的 `<img src=“…” class=“card-img-top” alt=“…” />` 拿掉，出現另一個錯誤訊息 → Expected linebreaks to be ‘LF’ but found ‘CRLF’ linebreak-style。 . 系統 : window 10 / 【解決方式 】 專案中開啟 .eslintrc.js 於 reles 內輸入 ‘linebreak-style’: [‘error’, ‘windows’]，就可正確使用 npm run serve 開啟。 ( 參考文章 stack overflow - [Expected linebreaks to be ‘LF’ but found ‘CRLF’ linebreak-style](https://stackoverflow.com/questions/37826449/expected-linebreaks-to-be-lf-but-found-crlf-linebreak-style) ) / 不確定這樣修改是否正確，再麻煩助教看看，感謝 > 助教回覆： > 這裏參考文章中的回覆若有正確開啟應該有成功更改換行方式，沒什麼問題~ 另外有看到文章有提供一個方法是查看 VS Code 右下角的換行方式是 LF 或 CRLF，可以在那邊點擊切換換行方式，如果有再遇到類似問題可以試試看! 助教很不好意思，又是我 Card.vue 依照上方方式處理完，繼續上照老師課堂中方式於 main.js 載入 vue axios，又噴同樣錯誤訊息 → Expected linebreaks to be ‘LF’ but found ‘CRLF’ linebreak-style 又嘗試同篇 [stack overflow](https://stackoverflow.com/questions/37826449/expected-linebreaks-to-be-lf-but-found-crlf-linebreak-style) 的另外一個方式，把原本在 .eslintrc.js 的設定刪除，關掉 vscode 再重啟，Card.vue 下方顯示 CRLF ，點選後上方會出現選單，選取 LF，再執行 npm run serve ，錯誤訊息就消失了。 所以是否只要下面出現 CRLF 都要變成 LF 才不會噴錯→ Expected linebreaks to be ‘LF’ but found ‘CRLF’ linebreak-style 呢 ? 再麻煩助教了，再次感謝 > 助教回覆： > 這裏參考此[文章](https://blog.cwlove.idv.tw/multi-platform-lf-crlf/)有看到 windows 系統的換行符號是 CRLF，和 Linux 系統的換行符號 LF 不同所以會產生編譯的錯誤，目前可以先使用同學的方式改變換行符，這裏明天會再和助教長確認是否有一併更改換行符的方式～ > >更新：VSCode 可以調整預設的尾行([參考](https://hsiangfeng.github.io/vscode/20210512/2779926364/#%E9%A0%90%E8%A8%AD%E8%A1%8C%E5%B0%BE%E5%AD%97%E5%85%83)) >設定後每次開啟新的頁面就會以 LF 尾行為主 如果要全部自動修正的話，要額外改另一個設定或嘗試使用 npm fix(但不推薦這個，而是自己手動修改知道問題比較好） --- 4. **Chiayu** 助教您好 ，這是我的 [完整程式碼](https://github.com/chiayutsai/question) 我在components資料夾內有建一個SwiperComponent的元件 然後在Views資料夾內的Product.vue 註冊 希望在Product.vue裡面出現輪播圖 但實際上會跳出以下warning 請問是什麼原因呢？謝謝助教！ > 助教回覆： > 這裏的 components 拼字了，導致沒有正確載入元件可以使用 https://github.com/chiayutsai/question/blob/9a38feefedbdf6ebaf3a37767c3c553412b2e1b1/src/views/Product.vue#L62 另外 Product.vue 第 42, 45 行 span 也拼錯，一樣會出現 warning 哦 https://github.com/chiayutsai/question/blob/9a38feefedbdf6ebaf3a37767c3c553412b2e1b1/src/views/Product.vue#L42 以上修正後應該就可以正確顯示了～ --- 5. **Sec** 助教您好, 在我的Products.vue有 addToCart 的function, fetch的方法success为true, message为加入购物车有误, 但是使用axios的话, success也是true, message就是已加入购物车, fetch的方法虽然显示success = true, 但是实际上不会加入到购物车内，axios的success = true就会加入购物车内 [github code](https://github.com/SecYJ/Vue-Live-Week-6-Challenge) > 助教回覆： > 可以參考 [fetch 的說明](https://developer.mozilla.org/zh-TW/docs/Web/API/Fetch_API/Using_Fetch#:~:text=body%3A%20JSON.stringify(data)%2C%20//%20data%20can%20be%20%60string%60%20or%20%7Bobject%7D!%0A%20%20headers%3A%20new%20Headers(%7B%0A%20%20%20%20%27Content-Type%27%3A%20%27application/json%27%0A%20%20%7D)) ，在 post 的 body 時候要多加 `JSON.stringify(obj)` 還有要加 headers ``` const res = await fetch(url, { method: "post", body: JSON.stringify(obj), headers: new Headers({ "Content-Type": "application/json",}), }); ``` (這邊只能由助教編輯，問題請到 thread 上詢問)