第五週 - 進階語法介紹

tags: 六角學院_Vue直播班_主線任務

目錄

• 第五週 - 進階語法介紹
  • 目錄
  • 產品列表頁面
    • 產品列表
    • 查看更多功能
    • 購物車列表
    • 加入購物車功能
    • 清空購物車功能
    • 購物車裡刪除單個品項功能
    • 購物車裡編輯單個品項功能
    • loading 動畫製作
  • 表單
    • VeeValiadation 設置

---

產品列表頁面

產品列表

1. 呼叫 api 取得啟用商品

2. 將商品 v-for 到列表上，其中圖片是用 backgroud 的方式，寫法如下，特別注意後面的地方是字串，所以要用引號包起來

<div style="height: 100px;
            background-size: cover;
             background-position: center;" 
     :style="{ backgroundImage: 'url(' + item.imageUrl + ')' }">       
</div>

---

查看更多功能

1. 建立 bootsrap 實體

2. 用 js 控制開啟和關閉 modal

3. 將資料帶入 modal

4. 將 modal 裡的產品數量和 id 傳出，並帶入外面的 addToCart()

---

購物車列表

1. 呼叫 api 將購物車資訊 v-for 出來

---

加入購物車功能

1. 呼叫 api 將商品加入購物車

---

清空購物車功能

1. 呼叫清空購物車的 api

---

購物車裡刪除單個品項功能

1. 呼叫刪除單個品項功能的 api

問題	成因	行動
打購物車 api 後面有 id 的都打不過，說沒有此品項	帶錯 id ，api 的 id 是 cart ID ，修改和新增裡 data 的 id 是 product ID	修正函式

---

購物車裡編輯單個品項功能

1. 觸發 blur 事件，呼叫 editProductNumInCart() ，呼叫編輯單個品項功能的 api

---

loading 動畫製作

1. data 設置 loadingItem，當點選按鈕時，將該項目的 id 帶入 loadingItem，loading 動畫就啟動

this.loadingItem = id;

<i class="fas fa-spinner fa-pulse" v-if="item.id === loadingItem"></i>

2. button 在等 ajax 時，是不能互動的

  <button
    type="button"
    class="btn btn-outline-secondary"
    @click="getProduct(item.id)"
    :disabled="item.id === loadingItem || !item.is_enabled"
  >
  </button>

---

表單

VeeValiadation 設置

1. 引入 CDN

2. 註冊元件

3. 定義規則

// VeeValiadation
const { defineRule, Form, Field, ErrorMessage, configure } = VeeValidate;
const { required, email, min, max } = VeeValidateRules;
const { localize, loadLocaleFromURL } = VeeValidateI18n;

// 定義規則
defineRule('required', required);
defineRule('email', email);
defineRule('min', min);
defineRule('max', max);

4. 加入多國語系

// 加入多國語系外部資源
loadLocaleFromURL(
  'https://unpkg.com/@vee-validate/i18n@4.1.0/dist/locale/zh_TW.json'
);

// Activate the locale
configure({
  generateMessage: localize('zh_TW'),
});