LESSON-22 · solution
這一頁不是直接複製答案；先逐檔看差異、修改原因與驗收證據，再把需要的改動帶回自己的資料夾。 這頁用 可觀察證據 和 anchor 指出下一個動作。
這一頁的結果：所有相關檔案可開啟或閱讀；沒有 TODO、CHECKPOINT 或 placeholder；能說明每個檔案為何改動
工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、DOM、Console 或 Network狀態。
會用到的檔案：index.html、style.css、main.js
本堂焦點：用 v-model、watch 與生命週期整理 Vue 表單狀態
一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。
現在要做：先對照差異，再檢查 在 index.html 的「v-model modifiers」對照這項變更：<input v-model.trim="form.name">
<input v-model.number="form.budget">
貼上位置：index.html 的 v-model modifiers 區塊
<input v-model.trim="form.name">
<input v-model.number="form.budget">預期結果：姓名無首尾空白，預算為 number。
驗收證據：畫面值與 typeof。
常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。
第一個檢查：只對照目前差異指定的檔案與 anchor。
現在要做：先對照差異，再檢查 在 main.js 的「computed watch cleanup onMounted」對照這項變更：watch(() => form.name, () => { if (status.value === "error") status.value = "idle"; });
貼上位置：main.js 的 computed watch cleanup onMounted 區塊
watch(() => form.name, () => { if (status.value === "error") status.value = "idle"; });預期結果：改值只重置錯誤，不自動送出。
驗收證據：狀態轉移與 cleanup 程式。
常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。
第一個檢查：只對照目前差異指定的檔案與 anchor。
現在要做：先對照差異，再檢查 在 main.js 的「state transitions error focus」對照這項變更：status.value = "loading";
貼上位置：main.js 的 state transitions error focus 區塊
status.value = "loading";預期結果：四種狀態可重現，loading 會結束。
驗收證據：aria-busy、disabled、status 與 activeElement。
常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。
第一個檢查：只對照目前差異指定的檔案與 anchor。
現在要做：先對照差異，再檢查 在 main.js 的「error reset」對照這項變更：if (status.value === "error") status.value = "idle";
貼上位置：main.js 的 error reset 區塊
if (status.value === "error") status.value = "idle";預期結果：error to idle to loading to success 可重現。
驗收證據：status、aria-busy、disabled 與 focus。
常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。
第一個檢查：只對照目前差異指定的檔案與 anchor。
完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。
index.htmlP0 專章可執行入口。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
<!doctype html><html lang="zh-Hant"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>LESSON-22 solution</title><link rel="stylesheet" href="style.css"></head><body><main id="form-app" v-cloak><h1>Vue 表單狀態</h1><form @submit.prevent="submitForm" :aria-busy="status==='loading'"><label>姓名 <input ref="nameInput" v-model.trim="form.name" autocomplete="name"></label><label>預算 <input v-model.number="form.budget" inputmode="numeric"></label><button :disabled="status==='loading'" type="submit">{{ status==='loading' ? '送出中' : '送出' }}</button><p ref="errorBox" tabindex="-1" role="status">{{ message }}</p></form></main><script src="https://unpkg.com/vue@3.5.40/dist/vue.global.prod.js"></script><script src="main.js" defer></script></body></html>style.cssP0 專章樣式與狀態證據。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI","Noto Sans TC",sans-serif;line-height:1.7;color:#17324d;background:#eef5f8}body>main,body>header,body>footer,main{width:min(100% - 2rem,760px);margin:1rem auto;padding:1rem}a{color:#155e75}button,input,textarea{font:inherit}button{padding:.65rem .9rem}input,textarea{display:block;width:100%;padding:.6rem}@media(max-width:390px){body>main,body>header,body>footer,main{width:min(100% - 1rem,760px)}}
[v-cloak]{display:none}[aria-busy="true"]{opacity:.7}:focus-visible{outline:3px solid #1d4ed8;outline-offset:3px}
main.jsP0 專章互動與 Console 證據。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
const {createApp,ref,reactive,computed,watch,onMounted,nextTick}=Vue;createApp({setup(){const form=reactive({name:"",budget:0});const status=ref("idle");const nameInput=ref(null);const errorBox=ref(null);const message=computed(()=>({idle:"尚未送出",loading:"正在處理",success:"測試送出成功",error:"請先輸入姓名"})[status.value]);watch(()=>form.name,()=>{if(status.value==="error")status.value="idle";});onMounted(()=>nameInput.value?.focus());async function submitForm(){if(!form.name){status.value="error";await nextTick();errorBox.value?.focus();return;}status.value="loading";window.setTimeout(()=>{status.value="success";},350);}return{form,status,message,nameInput,errorBox,submitForm};}}).mount("#form-app");Solution 對照完成後，回到 README 整理證據，並準備下一堂課的先備知識。
開啟 examples/supplement/index.html；自學檔案不混入 Solution files。