القوالب والتوجيهات والتعبيرات الآمنة

<script setup>
import { ref } from "vue"
const saving = ref(false)
const label = ref("Reading notes")
</script>

<template>
  <h1>{{ label }}</h1>
  <button type="button" :disabled="saving" @click="saving = true">
    Save notes
  </button>
</template>

في إعداد SFC المذكور يبدأ الزر مفعلاً، ويغيّر الضغط saving إلى true فيعطله. لا ينفذ حفظاً دائماً بل يشرح حلقة الربط دون ادعاء سجل محفوظ.

function displayState({ loading, failed, count }) {
  if (loading) return "Loading notes"
  if (failed) return "Could not load notes"
  return count === 0 ? "No notes yet" : "Notes ready"
}

if (displayState({ loading: false, failed: false, count: 0 }) !== "No notes yet") {
  throw new Error("DISPLAY_STATE_MISMATCH")
}

يعمل JavaScript مستقلاً تحت Node دون Vue أو شبكة، وينجح تحقق الفراغ. لا يربط مكوّناً أو يثبت إعلان قارئ الشاشة.