第 20 课：显示已提交时长列表

<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>
  <ul><li v-for="lesson in lessons">{{ lesson.minutes }} 分钟</li></ul>
</template>