양방향 입력 바인딩을 명시적인 검증 상태와 연결합니다.
v-model은 입력의 value와 update 이벤트를 묶습니다. trim, number 같은 수식어를 쓸 수 있지만 서버에서도 타입과 업무 규칙을 다시 검증해야 합니다.
label, 오류 텍스트, disabled 상태를 함께 제공해 입력 계약을 이해하기 쉽게 만듭니다.
큰 폼은 필드 상태와 제출 상태를 분리하고 중복 제출을 막습니다.
placeholder를 label 대신 사용하면 입력 후 필드 의미를 확인하기 어렵습니다.
로컬 프로젝트에서 확인해보세요이메일 필드와 형식 검증을 추가하세요.
<script setup>
import { ref, computed } from "vue";
const title = ref("");
const error = computed(() => title.value.length > 0 && title.value.trim().length < 3);
</script>
<template>
<main>
<form @submit.prevent>
<label>강좌명 <input v-model.trim="title" :aria-invalid="error" /></label>
<p v-if="error" role="alert">세 글자 이상 입력하세요.</p>
<button :disabled="!title || error">저장</button>
</form>
</main>
</template>