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

# 6/22 線上 Slack 助教

## 今日助教輪班時間

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

## 發問規範

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

## 注意

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

## 問題

1. Erica：
老師助教同學們好，這是我的 [Repo](https://github.com/ericacadu/panya) / [Demo](https://ericacadu.github.io/panya/#/login)
我想在後台訂單管理 > 修改訂單 裡的移除品項加上 BS Tooltip 提示 ( orderModal.vue 182行 )
目前在 Order.vue 裡 openModal 時會建立 tooltip
但不論是在哪裡建立 tooltip 似乎都不會出現效果
console.log(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
也是 undefined ，再請助教幫我看看問題出在哪裡呢？ (edited)
https://files.slack.com/files-pri/TH78FC3JL-F02648HAU81/_____________2021-06-21_______11.54.16.png

> 助教回覆：
這邊是因為同學的 modal 中的資料是需要經過 props 傳送，再由 v-for 渲染，而 v-for 在渲染畫面時，並不是瞬間完成，會需要經過一段時間。
>因此在同學 Orders.vue 208 行使用
`console.log(document.querySelectorAll(’[data-bs-toggle=“tooltip”]’))`
>會是 undefined （v-for 還沒渲染完
而我們無法確切知道 v-for 渲染需要的時間，因此可以使用 setTimeout 語法，稍微延遲一段時間，再使用 bsTooltip() 來獲取全部的 tooltip 的 DOM 哩。
>
>也就是將同學 207 行的 bsTooltip() 使用 setTimeout 延遲後再來觸發，這樣就可以正確獲得 tooltip 的 DOM 囉，詳細可參考下面的程式碼

 else {
        this.modalData = JSON.parse(JSON.stringify(item));
        this.modal = bsModal('orderModal');
        setTimeout(() => {
          bsTooltip();
        }, 100);
      }

---

2.Echo Hui:
老師助教你好，這是我的程式碼
https://github.com/echohuiecho/Vue-hexschool-week6_VueCLI
昨天有在每天助教服務問了關於Admin Product Modal開始的問題，我跟著昨天助教的回覆把程式碼更新了，但同樣的報錯還是跟昨天一樣，請助教幫忙看看問題出在哪裡:pray:
昨天的問題:
當我先按編輯產品按鈕打開Modal，關掉Modal，然後再按新增產品的按鈕開啟Modal，就會報錯
https://hexschool-share.slack.com/archives/G01GTT66PS6/p1624238970034400?thread_ts=1624237

> 助教回覆：
這邊是因為同學有在 modal 綁定驗證功能，這樣的話在新增商品時，也需要補上對應的 productTemp 屬性，否則 vee-validate 在渲染時，會因為同學使用

this.temp = { }

>而抓不到綁定的屬性，不清楚資料狀況因此出錯。
>
>上面敘述有點抽象，同學可以先把 ProductModal.vue 中， modal 表格部分進行註解，把 產品標題 以外欄位註解掉。
>接著在 ProductsAdmin.vue 新增產品的 openModal 補上對應屬性，

  if (modalStatus === 'addProduct') {
        // 新增產品
        this.temp = {
          title: '',
        };
      }

> 這樣就會發現開啟 modal 時不再噴錯囉。
>
> 簡單來說就是若有使用 vee-validate 驗證功能的部分，不能沒有對應屬性，否則渲染會發生錯誤喔。（不能直接使用 xxx = {} 清空）
> 還請同學試者補上所有有被驗證的 productTemp 屬性。

---
3.Tori
助教好，這是我的
[github](https://github.com/aer456987/natural)
[github Pages](https://aer456987.github.io/natural/dist/#/products)
頁面上面的分類欄位(FilterList.vue元件)，在桌機板模式下，滑動頁面時很正常，但是切換成手機模式，滑動頁面就會有微微抖動的狀況，不知道是甚麼原因造成的？如何解決？

> 助教回覆：
> 這邊有使用 chrome 開發者模式切換成手機版行，確實會有同學說的抖動狀況。
> 不過實際用 IOS 、 安卓手機去察看同學網頁就會正常的哩，這邊推測同學也是使用 chrome 切換到手機版行察看。
> 如果是的話，這邊主要是 chrome 模擬手機時不是很穩定哩， CSS 語法上是沒有問題的哩。

---
4.Echo Hui
助教你好，我把第七週範例程式碼下載後，執行 npm install，結果出現以下報錯，請問如何解決呢?
完整error log
https://www.notion.so/errorlog-ead45e58a0f74c2d8a526e303632af41
目前環境
Windows 10
node v15.11.0
node-gyp -v v8.1.0
npm 7.5.4
目前嘗試過的方法:
把Python2.7安裝在C:\Python27\python.exe，然後config npm python 路徑
npm config set python C:\Python27
2. Windows Build Tools install
npm install --global --production windows-build-tools@4.0.0
https://files.slack.com/files-pri/TH78FC3JL-F025Y15B4DA/image.png
> 助教回覆：
這邊有試著模擬同學提供的 錯誤路徑，也一樣會發生錯誤：

> 這是因為 Window 系統如果結構太巢狀容易出現問題，建議同學專案不要擺在這麼多層下，助教這邊把檔案放在第三、第四層是能正常使用的喔，如圖：

---
5.Alicia Lo
Ryder助教您好，
延續昨日關於Vue cli部署問題，已有根據昨日值班助教的建議將github page上傳到分支空間，並且根據老師的教學影片修正 build 出來的路徑問題。目前頁面console出來已經沒有404的紅字，但是出現了Error with Permissions-Policy header: Unrecognized feature: 'interest-cohort'. 的提示，畫面也沒有成功顯示出來，可能是我有些地方沒注意到，需要再請助教協助解惑了，這是我的github空間網址，謝謝助教!
https://github.com/Huchan1124/test/tree/gh-pages

> 助教回覆：
> 這邊是因為同學 router/index.js 設定有些錯誤哩，
> 直接使用 npm run serve 開啟，也會跳出相關警告：
> 
> 請同學再 router/index.js 的設定
> `component：import`
> component： 後方要記得再多添加一個箭頭函示，調整後如下：
> `component: () => import('../views/Front.vue'),`
> 這邊把 router/index.js 按照上方建議調整過來，再從新` npm run build `後，再把檔案重新 push 一次就會有哩。
> ( vue.config.js 設定沒有問題，主要是 router/index.js 中設定需要調整）
>
>

---
6.Iven
助教好：
想請問助教，我依照類別做了資料的區分，但是類別的部分會跑出同樣的類別，請問該怎麼將一樣的類別都合併起來？像是測試分類的部分就會有兩個一樣的測試分類的類別顯示出來，該怎麼做才可以將測試類別只顯示一個類別出來呢？
這是[我的程式碼](https://github.com/Iven10252158/try_try)

> 助教回覆：
>這邊可以使用 filter + indexOf 的方法來去過濾重複資料哩
> 助教這邊有新增 productName 的 data 變數，並搭配 filter + indexOf 將重複資料過濾掉，同學可以參考看看這個，[調整後的 code ](https://codepen.io/rider159159/pen/GRWaOyK?editors=1010)
> 有調整部分助教都有註解 "有調整" ，同學可以參考看看喔。
---
7.Echo Hui:
https://hexschool-share.slack.com/archives/G01GTT66PS6/p1624349109083400?thread_ts=1624323600.071100&cid=G01GTT66PS6
今天未能解決npm install 噴錯的問題，期待助教明天回覆:pray:謝謝

剛才我試了兩個方法，但還是繼續噴錯，不能正確運行npm install，請問還有其他方法建議嗎?
把資料夾移到 C:\ 根資料夾
把node update成 v16.3.0
完整error log
https://www.notion.so/error-log-210622-2-eddd4c68e9e042e083032f24b252ffd9

> 助教回覆：
這邊請同學切換到 node 14.16.0 版本試試看
從 [node 官網](https://nodejs.org/en/)可以得知，目前最穩定版本是 14.17.1 而在之上版本，確實有可能出現不太穩定的狀況哩。
助教這邊測試 14.16.0 是沒問題的喔。
---
8.Iven:
助教好： 我預期將Try.vue裡的資料 user傳進card裡面的innerComponent裡，並顯示在畫面上，但好像Try.vue的資料並沒有正確傳入card.vue裡面的innerComponent，找不到錯誤的地方，想請助教幫我檢查，謝謝。程式碼在此
https://github.com/Iven10252158/try_try

> 助教回覆：
user 的資料是有傳進 innerComponent 的喔，這邊可以把
Card.vue 的第 4 、 27 行註解掉

{{user.name}}/{{user.uuid}}

inject: ['user']

會發現 innerComponent 中的 mounted 確實有 user 資料，
但是畫面卻無法渲染 innerComponent 元件，這是因為目前同學使用 Vue Cli 方式作包裝，Vue Cli 無法直接渲染目前 innerComponent 的寫法。

這邊請同學也把 innerComponent 也寫成 .vue 檔後，在 import 到 card 元件，就能正確顯示囉。

---
9.Stacey Huang :
Ryder 助教你好,
昨天main.js引入Bootstrap時import 'bootstrap';發生錯誤,如下。但後來使用 npm install @popperjs/core 就沒事了。因此想請問一下,在使用npm 下載Bootstrap時,也需要一起下載[Popper](https://popper.js.org/)嗎?謝謝助教!
https://files.slack.com/files-pri/TH78FC3JL-F025CL0V015/image.png

> 助教回覆： 目前使用

 npm install bootstrap

> Bootstrap 最新版本，確實不會自己再帶上 popperjs 相關檔案，
> 因此在官方文件 [Webpack](https://bootstrap5.hexschool.com/docs/5.0/getting-started/webpack/) ﹑ [Popovers](https://bootstrap5.hexschool.com/docs/5.0/components/popovers/) 都有提到需要自行使用

   npm install @popperjs/core.

或是在 package.json 檔中設定好 popper 檔案哩。
>

---
10.Jordan_Tseng :
助教好，我想問有關imgur，我參考之前穎敏助教的教學寫，但是我一直出現錯誤，如果file弄成字串會是429，不用字串就也是錯。[連結](https://github.com/Jordan-TTC-Design/vue-2021-finalwork/blob/master/src/views/front/ApplyJob.vue)。另外還想問說我多圖的刪除按鈕，好像刪不到剛好那個，會是key問題？

> 卡斯伯回覆：
> 可以到 Network 看，基本上就是超過負載，請稍等一段時間再使用
> 

> 助教回覆：
這邊回覆多圖刪除問題，刪除功能是正確的。
>
>這邊看起來好像沒刪除正確，主要是因為按鈕名稱，在刪除 form.options.imagesUrl 資料後，ApplyJob.vue 121 行的 v-for
會重新渲染，因此按鈕名稱也會重置，所以這邊看起來會像是，不論怎麼刪好像都只會刪到最後一筆，這部分比較不建議同學直接使用 v-for 的 index 去添加 button 名稱，因為同學會去調整到 v-for 的基礎資料哩。

---
11.Jordan_Tseng ：
助教，其實我是想說遇到這種狀況，我已經選了第四張雖然還沒上傳，但是我刪第三個反而是第四個消失。
https://hexschool-share.slack.com/files/UV6LX0PPS/F0264KYP3L4/_____________2021-06-23_______9.58.51.mov

> 助教回覆：
刪除功能是正確的喔，從其他 Code 部分可得知 form.options.imagesUrl 是儲存圖片陣列部分。
同學可以在 form.options.imagesUrl 新增幾個網址圖片字串，並且在 HTML 新增 `{{ form.options.imagesUrl }}` 來觀察刪除功能的順序，結果是正確哩。
同學附上影片會有這種狀況，主要是因為 Vue 這個框架本身就是 『資料驅動畫面』 的設計，而目前上傳圖片功能，其實是沒有正確資料的（因為 imgur API 無法使用
因此在這種沒有資料綁定的狀況，單看畫面是不太準確的，Vue 會對繪製 HTML 部分採取一些類似快取的動作，實際上還是要瀏覽 Vue 中的資料哩。
---

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