# 第一組-第六週小組任務
## ==討論日期 : 2/14 ( 三 )==
:::info
報到
- [x] Uli
- [x] WeiWei崴崴
- [x] Eden
- [ ] Ann
- [ ] 依依
- [x] Moreene
- [ ] Winnie
- [ ] 仙貝
- [ ] 非常愛柯基
- [x] 樂樂
- [ ] cestjessie
:::
## 問題

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

:::spoiler 請參考以下 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.

:::

<br>

題目：https://chat.openai.com/share/d54dccf4-2153-4b18-9b81-35e14518047d

回答：

- 第一題 props:['item']
- 第二題 alert('Hello, Vue!');
- 第三題 v-model="message"
- 第四題

<ul>
  <li v-for="(item,index) in items" :key="`${index}-list`">
    <span>{{item}}</span>
  </li>
</ul>

- 第五題 this.isVisible = !this.isVisible;

ChatGPT 的回答
https://chat.openai.com/share/987f2356-8d64-41bd-a001-efe1a04f7bb8

### 挑戰二：繪製網站地圖，並且完成路由表撰寫
- 步驟一：繪製網站地圖

- 步驟二：完成路由表撰寫
僅需要撰寫路徑及名稱，不需要搭配元件
:::spoiler 範例

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

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

#### [Codepen](https://codepen.io/uli1313/pen/oNVJaEb?editors=0010)

### 挑戰三：
完成 [第六週 題目](https://casper-wang.notion.site/7555488641404d03a1b697dae6e5b2d5?pvs=4)
| 暱稱 | 第一題 | 第二題 | 第三題 | 第四題 | 第五題 | 第六題 | 第七題 | 第八題 | 第九題 | 第十題 |
| -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
| Uli |3|2|2|3|<router-view>|<router-link>|3|this.$router.push(`/product/${productId}`)|linkActiveClass|2|
| WeiWei崴崴 |
| Eden |
| Ann |
| 依依 |
| Moreene |
| Winnie |
| 仙貝 |
| 非常愛柯基 |
| 樂樂 |
| cestjessie|
| **討論結果**|3|2|2|3|<router-view>|<router-link>|3|this.$router.push(`/product/${productId}`)|linkActiveClass|2|

## 截圖