---
tags: Vue 直播班 - 2021 夏季班
---

# 6/24 線上 Slack 助教

## 今日助教輪班時間

Ryder：6/24 (四)
回覆時間：早上 9:00 -下午 1:00

## 發問規範

老師助教同學們好，**這是我的 Codepen**，我**原本預期**「JS 第 8 行會出現數字 8」，**但卻出現**「預期外的結果是 0」，想問下問題出在哪裡？

## 注意

1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. 以下問題區塊只能由助教自行增加
5. 助教會將回覆寫在下方問題區塊

## 問題

1. peter.chen1024：
助教你好，關於今天每日，我有看老師進階API影片，有提到響應式結構，如果provide使用function return結構，可以使子元件改變資料時，父層元件也跟著改變([參考](https://courses.hexschool.com/courses/vue-2021/lectures/31863562))。 [我的Code](https://codepen.io/JIAN-RONG/pen/Rwpzqvm?editors=1010) JS第15&11行改變cash，HTML第2行沒有跟著改變，想請問我有沒有漏掉那些地方

> 助教回覆:
> 這邊是因為 provide/inject ，其實在設計上就不支援，子元件改變資料，父元件會跟者改變的功能（避免發生資料來源不清楚狀況。
> 但如果使用 provide 提供一個物件，物件的屬性則可以支援，子元件改變資料，父元件會跟者改變的功能，比如[這個改後的範例](https://codepen.io/rider159159/pen/oNZrJxO?editors=1010)，以及同學提供的 ([參考](https://courses.hexschool.com/courses/vue-2021/lectures/31863562)) 影片中老師的範例。
> 這部分 Vue 官方文件確實沒有刻意說明，不過[這篇文章](https://www.jianshu.com/p/4fd68e81a79e)有說明這點，同學可以參考看看哩。
>

---

2.小妤：
老師同學好，最近在看 API 文件有一個地方不是很明白是甚麼意思 .... (如下圖) 。 請問 "取得產品列表" 裡面的 num 是甚麼意思呢 ??
https://files.slack.com/files-pri/TH78FC3JL-F025Y9H41JR/image.png

> 助教回覆:
這邊 API 中的 num 就是指回傳資料中的資料順序，以商品列表為例，每個商品資料中也都會有 num 這個屬性，第一個商品的 num 就會是 1 、第二個商品 num 會是 2、第三個商品 num 會是 3 ，以此類推哩。
---

3.小妤：
老師同學好，這是我的 code page，另外還有一個關於版面的問題 ( 和 Vue 無關 )。請問我的 navbar:hover 的部分有點怪怪的，請老師幫我看一下 (如下圖)

> 助教回覆:
這邊是因為同學的 黑背景選單 （navbar-menu navbar-skin-menu）是 .nav-item 的子層，因此當滑鼠在 黑背景選單 也會觸發這段 CSS

  .nav-item:hover .navbar-menu {
    opacity: 1;
    // display: block;
    transition: .5s ease-out all;
    transform: translateY(-20px);
  }

>這個部分的效果會比較建議改用 Bootstrap 的 [dropdown](https://getbootstrap.com/docs/5.0/components/dropdowns/) 元件來製作，會比較容易達成同學需求哩。

---

3. 金金 :
助教好，這是我的github https://reurl.cc/4armV2
我在第111行想用new Modal的語法建立Bootstrap的Modal，但是系統告知modal is undefined (我已經有在main.js 使用全域註冊modal了 https://reurl.cc/Dgj60d 第41行)，再麻煩助教協助看一下。
另外想問一下，我再使用bootstrap Modal時，devtool會跳出"export 'default' (imported as 'bootstrap') was not found in 'bootstrap' 的錯誤提醒，查了一下發現是Bootstrap5 跟vue3版本的問題，請問這個會影響我的程式碼嗎?還是可以不理它呢

> 助教回覆:助教這邊一一回覆你的問題喔:
> 1.有看同學在 main.js 使用 `app.component('Modal', Modal)` 來註冊 modal ，不過要注意的是 modal 並非元件，因此這邊設定其實沒有效果的。
> 因為這個 modal 設定會需要帶入 HTML 的 DOM 一般來說比較難在全域做綁定動作，不過這邊還是可以參考[官方範例](https://github.com/hexschool/live-vue3-dashboard/blob/main/src/mixins/modalMixin.js)，使用 mixin.js 方法引入 、或是 [Erica 同學寫法](https://github.com/ericacadu/panya/blob/master/src/scripts/methods.js#L9)：使用 export 將 modal 設定匯出，有需要時再引入哩。
>
> 2. 之所以跳出警告是因為 main.js 有使用 `app.use(bootstrap)` 。
> `xxx.use` 這段語法是 是讓 Vue 去啟動該套件，而 bootstrap 並不需要讓 Vue 來啟動哩，若要載入 bootstrap 在 main.js 使用 `import 'bootstrap'` 即可
> `app.use(bootstrap)` 則可以註解調，這樣不會跳出警告 BS 也能正確使用哩。
>
---
4. Iven :
助教好：
想請問助教，我在新增優惠券時會跳出 POST 500的錯誤，找不到是哪裡寫錯了，想請助教幫我檢查我哪裡寫錯。另外，有一點不懂，在CouponModal裡面的watch的部分，將時間格式改為 YYYY-MM-DD以及due_date的部分為什麼要這樣寫？ 我的程式碼。
https://github.com/Iven10252158/final_project

> 助教回覆:助教這邊一一回覆你的問題喔:
> 1. 新增優惠券有兩點要調整的，
> - saveCoupon() 的 emit 中會需要帶上 this.tempCoupon 作為參數，也就是

    saveCoupon () {
      this.$emit('saveCoupon', this.tempCoupon)
    }

> - 優惠券的 is_enabled 無法，目前後端是無法直接接受 true false 布林值，會需要改成 1 、 0 的數字格式，也就是需要將 CouponModal.vue 22 行 input 調整成

        <input type="checkbox" class="form-check-input me-1 " id="coupon_Enabled" :true-value="1"
        :false-value="0" v-model="tempCoupon.is_enabled">

>這樣優惠券就能使用哩。

> 2. 這邊是為了配合 CouponModal.vue 19 行 <input type="date"> 的格式哩，同學可以試著將這段程式碼註解掉，再使用 編輯 方式開啟 CouponModal 會發現日期部分，就無法正確顯示哩。
>

         const dateAndTime = new Date(this.tempCoupon.due_date * 1000)
        .toISOString().split('T');
      [this.due_date] = dateAndTime

>
---
5. 小妤 :
請問助教 api 文件裡 "加入購物車" 的部分內容有兩個 id (如下圖) ， 請問差異在哪裡呢 ?？

老師同學好， 這是我的 [CODE](https://github.com/peggyted0129/vue3_hex_0625) ， 不知道在哪裡出錯了...， 在 Cart.vue 頁要進入 "結帳" 時， postCarts 一直和原本的購物車內容兜不起來.... ( 我想有可能是 id 帶錯了 )， 請老師幫我看下好嗎 ??

> 助教回覆: 由於是同一位同學的問題有，助教整理在一起回覆。
> 1. product_id 是商品本身的 id， 而 id 則是商品加入購物車後另外形成的新增 id ，而這兩個 id 則會在 更新購物車 的 API 都會使用到，這邊新增回傳後的其實不太需要在意哩。
>
> 2. postCarts 這個 方法看起來是將當前購物車 和 localStorage 的購物車資料合併成新的購物車資料，如果是的話同學需要把 136 行的
> ` product_id: item.id,`
> 更改成
> `product_id: item.product_id,`
> 這樣就能正確加入購物車囉
>

---
6. Erica :
助教好，這是我的 [Repo](https://github.com/ericacadu/panya) / [Demo](https://ericacadu.github.io/panya/#/products?category=all&page=1)
我想在前台商品列表做分類及分頁
雖然 api 有提供分頁功能，但是不知道該如何應用在分類切換上
所以我徒法煉鋼另外寫分頁，再用 router 透過傳遞參數的方式控制
想請問這樣的做法不知道對不對，或是有更適合簡潔的做法，也想了解 api 提供的分類切換分頁作法
再麻煩助教幫我看看，謝謝

> 助教回覆:
> 目前使用分頁功能是後端設定的，目前分頁確實不會配合分類功能來回傳新的分頁資訊，如果有使用商品分類又想顯示分頁，確實需要自己來做設定，這邊有看同學自己做設定，這部分是沒有問題的。
>
> 另外分類作法是正確的，不過確實可以不透過 router 傳遞參數，直接做商品種類切換。
> 作法也跟目前同學作法大同小異，點擊分類選單會傳遞會傳遞分類選單參數，再透過該參數直接修改，商品列表的陣列（使用 filter 過濾相同 category）比如，這位[同學的作法](https://github.com/xin1994112/fruits)。
> 不過調整成這種方法，分類後的分頁元件 API 仍然沒有支援，如果需要的話，仍需要自己設定喔。
>

---
7. Jessie Cheng
助教您好，這是我的 GitHub、GitHub Pages
昨天經助教協助 vee-validate 的 debug 之後，修改了一下 code
ProductModal.vue 的 line #273 console.log 印出來是確定有產品資料的
但不確定是不是 vee-validate 的相關 Code 有寫錯 :pleading_face:，導致第一次點某項產品的編輯，modal 資料都有顯示，但離開後再點擊同一產品的編輯時，資料都沒顯示（如下兩圖所示）
麻煩助教了，謝謝
https://github.com/JessieMosbi/vue-hex-cli-project
https://jessiemosbi.github.io/vue-hex-cli-project/dist/#/products

> 助教回覆:
這邊測試 admin/Products.vue 141 行

this.$refs.productModal.$refs.productForm.resetForm()

>註解後，就能正確顯示，詳細問題點，助教這邊還在測試，如果有相關理解會在這邊補充。

---
8. sec:
助教好, 有几个问题想问:
1.想请问在图内的第5行的 date要 * 1000和第10行的 this.due_date / 1000 ，这2段为什么要 * 和 /
2.第7行的 [this.due_date] 这个语法是赋予变数吗还是有其他的意思?

> 助教回覆:助教這邊一一回覆你的問題喔:
> 1. 這邊是因為使用 new Date() 轉換格式時，單位需要到豪秒，而 this.tempCoupon 回傳的值只有到秒，因此會需要補上 * 1000 後續在 /1000
同學也可以試者在 coupon() 最下方，添加下面 code 去察看兩著差異

console.log(new Date(this.tempCoupon.due_date * 1000), new Date(this.tempCoupon.due_date))

> 2. 這邊就只是單純把 this.due_date 的值，改為陣列格式喔。

---

9.小妤 :
老師您好，在這問題串裡我昨天已經有留言了 ( 在樓上 ... )。但今早打開我的專案一直打不開，在終端機輸入 npm run serve 就一直跳錯誤碼，請老師幫我看下哪裡有問題好嗎 ?? code :sob: ( 昨天明明還好好的說 ) 錯誤畫面連結

剛剛在查詢我的錯誤碼似乎和 npm @7.x 版本有關。
參考 stackoverflow 解決方法
後來我在終端機輸入指令 npm update chokidar 更新 chokidar 就可以運行了。
造成此錯誤的原因我還是不明白，請老師解答… (被這問題搞了整個上午==)
而且每次運行都要重新執行 npm update chokidar 才 npm run serve…，有沒有更快的方式可以像以前一樣直接輸入 npm run serve 的方法 ??

>助教回覆 : 同學提供的 **[參考 stackoverflow 解決方法](https://stackoverflow.com/questions/66734503/react-npm-start-not-working-no-version-of-chokidar-available)**，就有提到一勞永逸的解法囉，就是將 npm 降版本到 6.14.12 。
> 如果想使用到 npm 7 版本，也可以根據[該討論串](https://github.com/facebook/create-react-app/issues/10811)，將 npm 調整至 7.5.4
> 之所以發生這問題，算是 node 和 webpack 相依套件衝突，從上面提到的討論串來看，套件官方也未修復這個問題，會比較建議同學直接自行調整 npm 版本會比較方便喔。
---
10.Erica :
助教好，剛剛有看到助教的回覆
參考同學的作法後想起當初決定用 router 傳遞參數的方式
是為了讓點進商品頁後回到上一頁可以保持原本瀏覽的分類及頁數
如果要達到這個目的，是不是還是只能用現在這種方式，或是還有其他作法呢？謝謝助教
>助教回覆 :
同學這邊做法是對的喔，因為要刻意紀錄，商品資料狀態(商品分類、商品頁數)，這部分方法在實作中，也會採取跟同學差不多的方法，透過更詳細的路由，讓資料狀態較為完整。
不管是後端 API、或是前端的其他方法，想要達成，切換頁面後的資料保留，其實都有相當難度哩，因此最常見方法，就是透過路由，再由路由轉為參數等等方法，已達成此目的哩。
---

11.

---
(這邊只能由助教編輯，問題請到 thread 上詢問)