النماذج والتحقق وهوية القائمة الثابتة

<script setup>
import { ref } from "vue"
const draft = ref("")
const error = ref("")
const emit = defineEmits(["save-title"])
function submit() {
  const title = draft.value.trim()
  error.value = title ? "" : "Enter a title"
  if (title) emit("save-title", title)
}
</script>

<template>
  <form @submit.prevent="submit">
    <label>Note title <input v-model="draft"></label>
    <p v-if="error" role="alert">{{ error }}</p>
    <button type="submit">Save title</button>
  </form>
</template>

في التطبيق المضبوط يظهر Enter a title للمسافات دون حدث حفظ، ويرسل غير الفارغ منقحاً. يحتاج التركيز وإعلان الخطأ والأحداث اختبار واجهة فعلياً منفصلاً.

<script setup>
import { ref } from "vue"
const notes = ref([
  { id: "n1", title: "Reactivity", selected: false },
  { id: "n2", title: "Components", selected: true }
])
</script>

<template>
  <ul>
    <li v-for="note in notes" :key="note.id">
      <label><input type="checkbox" v-model="note.selected"> {{ note.title }}</label>
    </li>
  </ul>
</template>

يبدأ Components محدداً وReactivity غير محدد. يمتلك المكوّن المصفوفة؛ تحتاج مجموعة الخصائص عقد الأب بدلاً من تعديل متداخل خفي. لا تدعي الدورة اختبار متصفح.