第 19 课：提交成功后清空时长输入

日期：2026-09-24
课程序号：第 19 课
知识点：提交后重置 v-model 数据

用途或适用场景

保存一条练习时长后清空字段，准备输入下一条。

核心概念

输入框由 v-model.number 绑定到 minutes；成功提交后修改 minutes.value 即可更新界面，不直接操作 DOM 的 value。

最小代码或操作示例

vue

<script setup>
import { ref, computed, useTemplateRef } from 'vue'
const minutes = ref(0)
const touched = ref(false)
const lessons = ref([])
const valid = computed(() => typeof minutes.value === 'number' && minutes.value >= 1 && minutes.value <= 60)
const minutesInput = useTemplateRef('minutes-input')
function submit() {
  if (!valid.value) {
    touched.value = true
    minutesInput.value?.focus()
    return
  }
  lessons.value.push({ minutes: minutes.value })
  minutes.value = ''
  touched.value = false
}
</script>
<template>
  <form novalidate @submit.prevent="submit">
    <input ref="minutes-input" v-model.number="minutes" type="number"
      min="1" max="60" @blur="touched = true" :aria-invalid="touched && !valid"
      :aria-describedby="touched && !valid ? 'minutes-error' : undefined">
    <p v-if="touched && !valid" id="minutes-error">请输入 1 到 60 分钟</p>
    <button>提交</button>
  </form>
</template>

3～5 分钟练习

输入 5 并提交，再观察输入框和 lessons。

参考答案

数组新增 { minutes: 5 }，输入框变为空白，touched 复位为 false。

与上一课的联系

沿用第 18 课的 submit、lessons、minutesInput 和无效聚焦；本课只在成功分支重置 minutes 与已有交互标记；完成后下一课可显示已提交课程的列表。

时效校验

时效校验：2026-09-24（Vue 3.5+ 当前表单绑定与模板引用文档；v-model.number 清空输入后可返回空字符串，未见废弃标记）。