6.1 在 Form.vue 中，将以下代码添加到 <script setup> </script> 内，以使“提交”按钮正常工作：

import { ref } from 'vue'

const formData = ref({
  username: '',
  password: '',
  isAustralian: false,
  reason: '',
  gender: '',
})

const submittedCards = ref([])

const submitForm = () => {
  submittedCards.value.push({
    ...formData.value,
  })
}

• 我们定义了一个响应式引用 formData 来保存表单数据。formData formData 初始状态是一个对象，包含 username 、 password 、 isAustralian 、 reason 和 gender 属性。每个属性都使用相应的默认值（空字符串或 false ）进行初始化。
• 我们定义了另一个响应式引用 submittedCards 来保存已提交表单数据的数组。submittedCards 初始时是一个空数组 submittedCards 它将在表单提交时存储表单数据对象。
• submittedCards.value.push({ ...formData.value }). 我们使用扩展运算符 ( ... ) 创建当前 formData 对象的副本，并将其添加到 submittedCards 数组中 .value 属性用于访问反应式引用的底层值。

6.2 在 Form.vue 中，使用以下代码创建一个卡片，并将其添加到上一个活动中创建的表单下：

条件渲染 ( v-if="submittedCards.length" ):

• 此 v-if 指令检查 submittedCards 数组中是否有任何项目。
• 仅当 submittedCards 具有一个或多个元素时，才会呈现包含卡片的整个 div
• submittedCards.length 返回数组中元素的数量。

Flexbox Container (class="d-flex flex-wrap justify-content-start"):

• 外部 div 使用 Bootstrap 类来创建一个灵活的盒子容器
• d-flex ：启用 flexbox 布局，使子元素默认对齐一行
• flex-wrap ：如果子元素（卡片）不适合放在一行，则允许它们换行到下一行
• justify-content-start ：将子元素与容器的开始（左）对齐。

Iterating Over submittedCards (v-for):

• v-for="(card, index) in submittedCards" 是迭代已 submittedCards ) 数组的指令
• 对于数组中的每个项目，它会创建一个新的 div （卡片）。
• card 是当前项（带有表单数据的对象）， index 是当前项在数组中的位置。

每张卡的唯一密钥（ :key="index" ）：

• :key="index" 使用数组中的索引为每个卡片元素分配一个唯一的键
• 这有助于 Vue 有效地跟踪每张卡片以进行渲染和更新

卡片结构 ( class="card m-2" style="width: 18rem;" )：

• class="card" ：将 Bootstrap 卡片样式应用于 div
• m-2 ：在卡片的所有边缘添加边距，确保卡片之间的间距
• style="width: 18rem;" ：为每张卡片设置 18 rem 单位的固定宽度

Card Header (class="card-header"):

• 在卡片上添加一个标题部分，其中包含“用户信息”文本。

List Group (class="list-group list-group-flush"):

• ul 元素带有类，可将其设置为列表组样式
• list-group-flush 类删除列表项的边框和填充，使它们与卡片齐平

List Items (class="list-group-item"):

• 每个 li 元素代表一份表单数据。
• 使用插值（ {{ }} ）插入 card 对象中的相应值：

  • {{ card.username }}: Displays the username.
  • {{ card.password }}: Displays the password.
  • {{ card.isAustralian ? 'Yes' : 'No' }}: Displays "Yes" if the user is Australian, otherwise "No".
  • {{ card.gender }}: Displays the user's gender.
  • {{ card.reason }}: Displays the reason for joining.

6.3 让我们对卡片进行样式设计以使其更加用户友好，在 <script setup></script> 块下添加以下代码：