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

# 6/1 線上 Slack 助教

## 今日助教輪班時間

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

## 發問規範

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

## 注意

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

## 問題

1.小魚:
大家好，想請教一下在product.html裡的更改啟用的按鈕，要怎麼寫及修改才能寫進去資料裡面並作改變
https://github.com/JarvisYu1993/Vue-week3
> 助教回覆： 這邊可以在 input 使用 `@change` 事件搭配編輯產品 API 來達成此功能。
> `@change` 會寫在 input 上
> ` <input @change="changeProductState(item.id)" class="form-check-input checkBox" type="checkbox" :id="item.id" :checked="item.is_enabled? 1 : 0">`
> changeProductState() 方法中，切換狀態，並附上 API 需求的檔案，這樣就可以達成同學需求哩。
> 第三周作業 Jordan_Tseng 同學有做出此功能，同學可以參考看看他的寫法: https://github.com/Jordan-TTC-Design/2021-vue-hw/tree/main/week3
> 有不清楚地方在提出來，助教會在回覆你喔。

2.const { name, num } =
這樣是指直接賦值給 物件 中的值嗎？
https://files.slack.com/files-pri/TH78FC3JL-F023YM1TK0R/cleanshot_2021-06-01_at_11.15.30_2x.jpg

> 助教回覆：是的，這是 ES6 新增的物件解構賦值方法。
> 建立變數時，如果要設定的值剛好是，物件中的值，就可以直接命名物件的屬性名稱。
> 該變數就會直接指向，該屬性的值。
> 此功能詳細介紹可以參考這篇文章: https://pjchender.blogspot.com/2017/01/es6-object-destructuring.html

3.Echo：
老師助教同學們好，這是我的 [Codepen](https://codepen.io/eni13718/pen/GRWyQWR?editors=1111)（請附上連結），js檔的第一行 import Vue from CDN 然後使用 Vue.createApp，這個部分會直接報錯，一定要使用11行的 import {createApp} from CDN 然後 createApp 才會成功執行，想問下問題出在哪裡？
> 助教回覆：因為 https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.11/vue.esm-browser.js 這個檔案裡沒有 Vue 這個變數哦，所以匯入時會出現錯誤
第 11 行沒有問題是因為檔案裡有 createApp 這個變數，所以可以成功匯入哩

4.Bruce：
老師助教同學們好，這是我的 Codepen（[登入頁](https://codepen.io/CHEN_B/pen/YzZYORO )、[管理控制台](https://codepen.io/CHEN_B/pen/jOBYvdb)），我原本預期「管理控制台可以取得所有產品資料」，但卻出現「一堆黃字 及 驗證錯誤, 請重新登入」，想問下問題出在哪裡？
> 助教回覆：CodePen 無法儲存 Cookie 哦，所以會驗證錯誤、無法成功取得產品列表哩。可以參考頻道裡的討論：
https://hexschool-share.slack.com/archives/G01GTT66PS6/p1621231582193200
https://hexschool-share.slack.com/archives/G01GTT66PS6/p1621237549200500
這邊助教將檔案放到 VS Code 測試是沒有問題的，可以成功取得產品資料～
>
>黃字的部分：
因為 v-else 一定要搭配 v-if 才能執行，目前同學在第 99 行「刪除圖片」按鈕寫了 v-else，但前面沒有寫到任何 v-if 的程式碼
第 90 行同學在最後寫到 tempProduct.imagesUrl[key]，但這邊的 key 沒有被定義
把這兩個部分修改完就不會有黃字囉 :D

5.Sec:
老師助教同學們好, 想请问axios.defaults.headers.common["Authorization"] 这段怎么改写成fetch的形式
> 助教回覆：
> fetch 的話，只能在每個請求的 header 中添加 Authorization 相關設定，這邊已獲得產品 API 為範例，實際上 fetch 會寫成:
> https://codepen.io/rider159159/pen/qBrxEmm
> 因為 code 較長，助教把程式碼放在 codepen 上，範例中的 this.url 、 this.path 還請同學自行調整。
> 另外助教補充一下，實務上目前比較常用的還是 axios，設置上比較方便哩。

6.Bruce：
我作業是在筆電用 vscode 做的，但是怎麼樣都無法取得產品列表，但是我發現如果用 https://vue3-course-api.hexschool.io/api/g87javk63/products 這組 API 的話就可以撈到列表（去掉 admin 並把 product 加上 s），請問為什麼呢？
> 助教回覆：
> 在登入頁面時，同學儲存 token 時是命名 token（第 105 行）；在產品頁面取得 Cookie 中的 token 名稱卻是 hexToken（第 65 行）。但 hexToken 並沒有內容，因此在驗證的時候就會出現錯誤。
> API 中的 admin 就代表此 API 只有管理者才能存取，必須要有 token 來驗證才行。如果去掉 admin 就是使用者存取的產品列表，不需要經過驗證即可查看～
> 通常我們在管理後台的時候，因為還會有新增產品、刪除產品等功能，這些是不能被使用者操作的，因此在後台管理頁面一定要經過 token 來驗證，所以需要串接有 admin 的這支 API
---