LESSON-22 · SELF-PACED PRACTICE

Vue 表單資料與狀態轉移

把「Vue 表單資料與狀態轉移」拆成 4 個可獨立完成、可重設、可驗證的自主學習 module。

4個獨立主題3個練習階段1個整合挑戰

看見缺口 → 修改一小段 → 重新載入驗收

每一個 topic 都有自己的檔案、Starter、Checkpoint、Solution 與證據清單。

先知道今天要做什麼

不要從長篇名詞開始；先從第一個可完成的小任務開始。

從第一張卡開始，先閱讀任務情境與預期畫面。

打開 Starter 的實作檔，依 Step 逐步修改，不靠按鈕代做。

重新整理頁面，對照畫面、DOM、Computed、Console 或文件證據。

每張卡只練一個責任；完成後再進入下一張。

能以三個真實輸入事件分辨 trim、number 與 lazy 的轉換/更新時機。

要修改：files/starter/index.html

能把可同步推導的提示留在 computed，只讓 watch 記錄來源變更這項外部效果。

要修改：files/starter/main.js

能在快速變更時取消前一個延遲工作，並只在 onMounted 後把焦點放到存在的姓名欄位。

要修改：files/starter/main.js

能以 idle/loading/success/error 管理 Vue 表單，loading 同步 aria-busy/disabled，錯誤時把焦點移到第一個無效欄位。

要修改：files/starter/index.html

把已完成的責任轉回本章完整作品，不把整合步驟冒充成單項教學。

在同一份章節作品中整合 4 個 module，排除單項通過但組合失敗的問題。

完成 modifier 正確、watch 可清理且成功／錯誤都能恢復的 Vue 表單。

如果你現在只想知道下一步，先做這件事。

開啟「v-model.trim／.number／.lazy」：先看 files/starter/index.html 的同時記錄 DOM input.value、反應式值與 typeof，不只看畫面。，記錄目前狀態，再修改一小段。