# 第六週小組任務

使用 discord、ZOOM 來討論，組員沒麥克風也可以一個人分享畫面，其他組員用文字討論，解答此問題集

**回報流程：**
1. 請組長到下方回報解答連結，**一個小組請派一人提交(依據當周條件提交)**。回報內容需含：
1. 該問題集的答案
2. 提供 1~3 張 discord 或 ZOOM 對話截圖，確保有進行小組討論
3. 組員參與名單
2. 助教檢視過後，就會回覆 ✅ 來回報審核成功與否。

**常見問題：**
Q：約時間討論的組員至少要幾位？
A：至少兩位就可成團！

Q：如果沒有分組，可以一起玩嗎？
A：可以

## 問題

### 挑戰一：團隊成員使用 ChatGPT 產出選擇題，讓成員之間互相回答
- 這些題目可以對幾題？
- ChatGPT 的答案正確嗎？如果不正確，正確的邏輯為何？

請參考以下 ChatGPT 提示詞：

請提供給我 Vue 測驗選擇題，所有都是以 “全英文” 進行出題
題目範圍：Vue 3 Option API、生命週期、Vue Component 各項知識(v-slot、props、emits、provide、inject)、directive(v-for、v-if、v-model 等)、transition、Vue Router 為主。

- 題目以程式碼模擬題為主（程式碼行數可以控制在 10 行內）
- 不需要提供答案，我會回覆再給你判斷是否正確，解答請用 “台灣正體中文” 描述
- 一次提供 5 題，並 “大幅提高題目的複雜度”

題目範例：
// Consider the following Vue 3 component

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
        <button @click="removeItem(item.id)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  },
  methods: {
    removeItem(itemId) {
      this.items = this.items.filter(item => item.id !== itemId);
      this.$emit('item-removed', itemId);
    }
  }
};
</script>


Which of the following statements is incorrect?

A. This component uses the v-for directive to render a list of items.
B. The removeItem method removes an item from the items array and emits an event with the removed item's ID.
C. The :key binding in the v-for loop ensures efficient updates when the array changes.
D. The provide and inject options are used to share the items array with child components.

Please review the code and select the option that contains the incorrect statement.

### 挑戰二：繪製網站地圖，並且完成路由表撰寫
- 步驟一：繪製網站地圖
- 步驟二：完成路由表撰寫
僅需要撰寫路徑及名稱，不需要搭配元件

    const router = [
        {
            name: '首頁',
            path: '/'
        },
        {
            name: '產品列表',
            path: '/products',
        },
        {
            name: '產品內頁',
            path: '/products/:id'
        },
        {
            name: '預約訂位',
            path: '/booking'
        }
    ]

盡可能使用到的技巧
1. 動態路由
2. 巢狀路由

---

## 回報區

回報範例：

- [ ] 無組別 / 卡斯伯 [小組任務連結傳送門](https://)
- [ ] 第3組 [小組任務連結傳送門](https://hackmd.io/vTaxLJW2TBWs_OgVSsiQrQ?view)
- [ ] 第 11 組 [小組任務連結傳送門](https://www.notion.so/981d5b01e0c748de950c9d6d88982a55)
- [ ] 第 1 組 [小組任務連結傳送門](https://hackmd.io/@_Z8QawBcTC6y-J5Bu_f1qA/H1-QWelop)
- [ ] 第二組[小組任務連結傳送門](https://cuboid-basil-c63.notion.site/3719c0d588314f5aaca2f04edc50db74)