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

# 6/9 線上 Slack 助教

## 今日助教輪班時間

佩涵：6/9 (三)
回覆時間：下午 1:00 -下午 4:00

## 發問規範

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

## 注意

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

## 問題

1. **Alicia Lo**：
老師助教同學們好，這是我的 [Codepen](https://codepen.io/dkcyhyre/pen/MWpBExw)，
關於第五周的作業，目前撰寫「JS 第 64-96行的Modal元件」，同時在「HTML的第51行到54行有綁v-on，@click="getProduct(item.id)" (JS第41-56行)」。
我原本預期點擊 「查看更多」的按鈕會彈出Modal，但卻沒有成功顯示，同時原本「JS 第25-40行getProducts()都有成功取得並渲染全部商品資料，但寫到Modal元件的時候就無法顯示了」，想詢問助教我的Modal的程式碼在哪個環節寫錯了呢？
謝謝助教!
> 助教回覆：
> JS 第 78 行 `modal=""` 的 `=` 要改成冒號 `:` 哦，改完之後 Modal 就會正常跳出來了～
> 至於商品資訊無法渲染，同學可以打開 Console，會出現下圖中的黃色警訊
> 
>
> 是因為 HTML 第 22 行的 addToCart 方法沒有被定義（即父元件的 methods 裡沒有這個函式），因此可以先在 methods 新增一個空的 `addToCart(){}`，應該就能夠正確呈現了～

---

2. **leolee**：
老師助教同學們好，想請問有關[今天每日任務](https://hackmd.io/YoFLa6-oR-SJmL7sia_0IA)的問題，這是我的 [Codepen](https://codepen.io/nekorice/pen/oNZMGOG)。
今天的每日任務敘述讓我有點混亂，我以為需求是要更改全域元件內的值後，使其反映到父層的值(答案是反過來)。
想請問有方法是可以透過watch監聽元件內的值，來更改父層的資料嗎(跟今天每日的解答反過來的運行方式)?
> 助教回覆：
> 每日任務的描述是沒問題的哦，這邊再跟你說明一下單向數據流以及要使用 watch 的原因
> 單向數據流的錯誤：通常來說透過 props 傳進來的 data 是不能改變他的值的，否則會連帶外層的也被影響
> 因此我們為了不要去更動到值，會使用 watch 來監聽傳進來的 props 值（這邊是 propCash），當他發現你要更改他的時候，去執行 this.cash = this.propCash; 這個動作，意思是將元件內的 data 去接替傳進來的 data，用接替的那個 data（這邊是 this.cash）去修改值就不會發生錯誤哩
> 所以同學說的「更改父層的資料」其實違反單向數據流的特性了，而且是跟 watch 沒關聯的哦。如果只是想要把元件內的值傳出去給父層使用的話，使用 emit 就可以了～

---

3. **Yu sung**：
老師助教您好，想詢問第五周作業，想請問三個問題
:arrow_forward: 第一個是在清理購物車，我希望的效果沒有購物車內容或者是表單送出就disabled
效果有做出來，但會跳錯誤執行不引響，在html裡67行。(:disabled="carts.carts.length===0")
:arrow_forward: 第二個是vue-loading-overlay的執行，有參考老師上課影片操作，
但會跳出錯誤，想請問是否步驟有那裡錯誤呢，在htm156行，js245行
:arrow_forward: 第三個是我希望在加入購物車按鍵上面可以有loading效果有嘗試寫判斷讓你去做判讀，
但很奇怪是我用console.log上看到有確實把產品id參數給loading的物件上去做loading效果的判斷
，但是在Vue的視窗上沒有看到參數有放在loading的物件上，導致loading效果沒有出現。
不知道原因如何呢，js93-95行
再請助教幫我解惑謝謝。:pray:
[github](https://github.com/v268018/VueFiveWeek)
[page](https://v268018.github.io/VueFiveWeek/)
> 助教回覆：
> 1. 因為 carts（陣列） 是物件第二層，如果我們沒有預先定義就會有取不到的問題
所以 js 那邊 data 的部分要改成

carts: {
  carts: []
},

> 2. 錯誤的原因是引入 JS & CSS 各自的版本不同。把 js 的 cdn 改成以下就可以囉

<script src="https://cdn.jsdelivr.net/npm/vue-loading-overlay@4.0.2/dist/vue-loading.min.js"></script>

> 3. 將 addCart() 函式裡的 this.$refs.userProductModal.hideModal(); 這行去除掉就可以囉
---

4. **Tori**：
助教你好，想請問有關modal彈出的問題。
這是 (圖一) 的 [Github](https://github.com/aer456987/natural_week_five) 、 [Github Pages](https://aer456987.github.io/natural_week_five/product_page.html) =>使用元件載入model
這是 (圖二) 的 [Github](https://github.com/aer456987/Fundraising-website) 、 [Github Pages](https://aer456987.github.io/Fundraising-website/index.html) =>直接在HTML和JS使用model
目前在開啟單項產品的 modal 時，整個 body 的 padding-right 會被往左推 17 px (圖一)，導致畫面會一直抖動，但去看其他作業使用的 modal 並沒有這個問題 (二)，不知道問題是出在哪裡
> 助教回覆：
> 不好意思 >< 助教目前找不到問題點出在哪 :crying_cat_face: 如果之後有發現原因是什麼會再告知你！
> 這邊先附上 [一篇文章](https://blog.csdn.net/zh921112/article/details/64476134) 給你看，目前可以先試著把 body, *.modal-open 的 padding-right 的數值強制變成 0

---

5. **Fred Chang**：
老師助教同學們好，共有三個問題想請教：
1. 這是[第四週作業的GitHub](https://github.com/fred8196/Vue-Week4.git)，我在admin.js的第６、７行將url及path宣告成全域變數，但在userProductModal、delProductModal這兩個元件內皆無法取得，所以暫時在這兩個元件下的data自行新增url和path，讓method可以用this.url、this.path來運作，請問有什麼方式可以取得全域變數嗎?
2. 這是[第五週作業的GitHub](https://github.com/fred8196/Vue-Week5.git)，我在index.html下的112~120行想使用v-else的方式讓購物車是空的時候能顯示自定義的文字，但目前購物車為空時仍顯示空白，因為沒有跳錯，不曉得是不是寫法是用錯了。
3. GitHub同上為第五週，在index.html下的第18行有使用VueLoading作為載入頁面時的效果，但如果要應用到例如51～52、58～59這種Font Awesome的標籤，該如何使用才能取代原先的i標籤呢?
以上還請助教協助解惑，感謝:man-bowing:
> 助教回覆：
> 1. 因為沒有寫在同一個檔案，所以拿不到是正常的唷～之後 Vue Cli 會使用 .env 來解決這個問題，所以目前建議都先分開寫哩
> 2. v-else 後面不能寫條件喔～如果要寫條件的話可以使用 v-else-if。另外 v-if 的條件有寫錯，要改成 cart.carts.length > 0 才正確，若使用 cart.carts 則陣列無論有沒有值都會是 true～
> 3. 同學可以參考看看 [這個網頁](https://kaychen1994.github.io/2020/08/30/vue-loading/) 喔，他有教如何更改 vue-loading-overlay 的樣式～
---

6. **Yi Chieh**：
老師助教同學們好，這是我的 [GitHub](https://github.com/umon752/Vue-week5/blob/main/index.html)、[GitHub Pages](https://umon752.github.io/Vue-week5/)
請問在 index.html 中的 139 行 :class="{'disabled' : cartsLength}"，為什麼使用 :class="{'disabled' : cartsData.carts.length === 0}" 的方式會出錯呢？
昨天助教直播中使用此用法是沒有問題的，想請問問題出在哪裡呢？
還請助教幫我解答，謝謝:woman-bowing:
> 助教回覆：
> 因為 carts 是物件第二層，如果我們沒有預先定義就會有取不到的問題
所以 js 那邊 data 的部分要改成

cartsData: {
  carts: {}
},

---

7. **Carrie**
老師助教同學們好，這是我的 GitHub Page / GitHub Res，
我原本預期「index.html 第 40 行加上 @click="openModal"」 & 「app.js 第 43 行加上 this.$refs.userProductModal.openModal(); 」 於頁面點擊查看更多按鈕，會跳出 Modal ，
但卻出現錯誤訊息 → Cannot read property 'openModal' of undefined。有在 app.js 第 44 行加上 console.log('kkk'); 卻是可以運作的。
想請問問題出在哪裡 ? 謝謝 !

> 助教回覆：
> 錯誤訊息中的 openModal 是指這裡哦（下圖圈起處）
>
> 
>
> 因為同學沒有幫任一標籤設定 ref="userProductModal" 所以會取不到～
而這邊要寫在 <user-product-modal> 元件標籤上，才可以調用 userProductModal 這個子元件內的 openModal() 方法
> 因此只要在 HTML 加下方這行就可以成功開啟 Modal 哩

<user-product-modal ref="userProductModal"></user-product-modal>

---
8. **youting**
助教好，這是我的 repo https://github.com/youtingluo/vue3-week5/blob/main/all.js
我要解決查看單一產品細節加入購物車重複產品疊加的問題，我預期第81行判定產品有重複時，會在84行將要更新的 qty 賦予為當筆購物車的產品數量+1，然後執行 updateCart 更新購物車函式，他會更新沒錯，但還是會繼續執行 else 後的 post 行為，且 qty 數量為84行重新賦予的，導致會在購物車多一筆同樣的產品，forEach也無法使用 return 中斷，但是 if 執行後卻還是會執行 else 後的程式碼讓我很困惑，希望助教幫我解惑
這是原本寫的 gh-page https://youtingluo.github.io/vue3-week5/ 但發現會有不會疊加的問題 
原本這樣寫會有相同產品不累加項目的 bug，目前發現只有巧克力會有這樣的情況 QAQ

addCart(item, qty = 1) {
  this.loadingStatus.isLoading = item.id;
  const cart = { product_id: item.id, qty };
  axios
    .post(`${url}/api/${path}/cart`, { data: cart })
    .then((res) => {
      if (res.data.success) {
        this.getCart();
        this.loadingStatus.isLoading = '';
      } else {
        alert(res.data.message);
      }
    })
    .catch((err) => {
      console.log(err);
    });
},

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