Vue의 Form Validation
HTML5는 required 속성을 제공하여 빈 인풋에 대한 validation을 제공한다.
1
<input required>
이것은 빈 인풋을 submit 하려 하면 자동 에러메시지를 제공한다.
.prevent modifier
Event modifier로 submit 이벤트가 페이지를 다시 로드하는 것을 방지하는 데 사용되는 이벤트 수정자.
1
2
3
4
5
6
<form class="review-form" @submit.prevent="onSubmit">
<p>
<label for="name">Name:</label>
<input id="name" v-model="name" placeholder="name">
</p>
...
.number modifier
v-model에서 제공하는 .number modifier는 좋은 기능이지만 버그가 있다. 값이 비면 String을 반환하는 버그인데, 이것은 Number() 를 이용하여 wrapping 함으로써 해결할 수 있다.
1
2
3
4
5
<input
v-model.number="coffee"
type="number"
name="coffee"
> Coffee <br/>
1
Number(this.coffee)
출처: Vue.js: Forms & v-model - Intro to Vue2