목표: 텍스트 필드에서 에러를 발생시켰는데, 사용자 입력이 있으면 에러를 지운다!

1. 상황

뷰로 작업을 할때 위 처럼 텍스트 필드의 에러를 처리할 때가 있다.
간단하게 정리하면,

1) 공백이면 에러를 발생시킨다.
2) 사용자 입력이 주어지면 에러를 없앤다.

그럼 어떻게 만들것인가?

1) 공백이면 에러를 발생시킨다.

로그인 버튼을 눌렀을때 각각의 텍스트 필드에 연결된 값들을 검사하고 공백일때 에러를 띄운다. (v-model 또는 value로 연결해 놓았을테니까)

        login(){
            if(this.isBlank(this.id)){
                this.idError = true
            }
            if(this.isBlank(this.pw)){
                this.pwError = true
            }

        },
        isBlank(val){
            if(val === undefined) return true
            else if(val === null) return true
            else if(val === '') return true
            else return false
        }

2) 사용자 입력이 주어지면 에러를 없앤다.

사실 이것때문에 썻다.
내 방법은 watch 달아서 사용자 입력이 빈공백이 아니면 에러를 지운다.

    watch: {
        id(val){
            if(val.length > 0){
                this.idError = false
            }
        },
        pw(val){
            if(val.length > 0){
                this.pwError = false
            }
        }
    },

2. 전체 코드

<template>
  <div>
    <div class="box">
      <div class="subBox">
        <input
          v-model="id"
          class="textField"
          placeholder="아이디를 입력해주세요."
          :class="{'textError': idError}"
        >
        <p
          v-if="idError"
          class="subError"
        >
          아이디를 입력해주세요.
        </p>
      </div>

      <div class="subBox">
        <input
          v-model="pw"
          type="password"
          class="textField"
          placeholder="비밀번호 입력해주세요."
          :class="{'textError': pwError}"
        >
        <p
          v-if="pwError"
          class="subError"
        >
          비밀번호를 입력해주세요.
        </p>
      </div>

      <button
        class="login"
        @click="login"
      >
        로그인
      </button>
    </div>
  </div>
</template>

<script>
export default {
    name: 'Main',
    data() {
        return {
            id: '',
            pw: '',
            idError: false,
            pwError: false
        }
    },
    watch: {
        id(val){
            if(val.length > 0){
                this.idError = false
            }
        },
        pw(val){
            if(val.length > 0){
                this.pwError = false
            }
        }
    },
    methods: {
        login(){
            if(this.isBlank(this.id)){
                this.idError = true
            }
            if(this.isBlank(this.pw)){
                this.pwError = true
            }

        },
        isBlank(val){
            if(val === undefined) return true
            else if(val === null) return true
            else if(val === '') return true
            else return false
        }
    }
}
</script>

<style>
.subBox{
    margin-bottom: 40px;
    height: 80px;
}
.textField{
    border: none;
    border-bottom:1px solid black;
    height: 45px;
    line-height: 45px;
    box-sizing: border-box;
    width: 300px;
    font-size: 20px;
}

.textError{
    border-bottom-color: red;
}

.subError{
    height: 15px;
    color: red;
    display:inline-block;
    margin-top: 10px;
    margin-bottom: 10px;    
}

.box{
    width: 300px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 100px;
    height:300px;
}

.login{
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    text-align: center;
    margin-top: 50px;
    background-color: #3b5998;
    color: white;
}

.login:hover{
    opacity: 0.9;
}
</style>