# 第五週 - 進階語法介紹

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

## 目錄
[ToC]

---

## 產品列表頁面
### 產品列表

**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'),
});