computed - 종속 data 캐싱으로 button disabled validation 제어

서론

지난번 글 hjh0827.tistory.com/24에서 button 클릭시 제어를 data 빈값 체크로 페이지 이동을 처리하였다.

goNextPage () {
      if (this.signup.id == null || this.signup.password == null || this.signup.pwhint === '' || this.signup.pwhintans == null || this.passwordCheck == null) {
        alert('필수값 누락')
        return
      }
      if (!this.idValid || !this.passwordValidFlag || !this.passwordCheckFlag) {
        alert('유효성 확인')
        return
      }

      this.$router.push({ name: 'signup2', params: { signup: this.signup } })
    }

하지만 vue.js의 장점인 데이터 바인딩시 화면 제어하는거엔 맞지 않아서 computed로 종속 data를 캐싱하여 button disabled 처리로 개발을 해보도록 하였다.

 

computed 간단 설명

vue.js 문서

kr.vuejs.org/v2/guide/computed.html#computed-%EC%86%8D%EC%84%B1

computed와 watch — Vue.js

vue.js 문서에서 간단히 설명되어있지만 내가 분석한 바로 간단하게 설명하면 특정 data에 종속되어 자동으로 변경되는 data의 하나이다.

 

#기본 예제

<template>
  <div class="container">
    <div>
      <Logo />
      <h1 class="title">
        computed 테스트
      </h1>
    </div>
    <input v-model="inputNum" type="number">
    <br>
    inputNum : {{ inputNum }}
    <br>
    inputNum2 : {{ inputNum2 }}
  </div>
</template>

<script>
export default {
  data () {
    return {
      inputNum: 0
    }
  },
  computed: {
    inputNum2 () {
      return parseInt(this.inputNum) + 1
    }
  }
}
</script>

 

예를 들어 입력받는 attribute inputNum이 있고 그 데이터 + 1을 가지는 inputNum2라는 attribute를 만들고 싶다라고 한다면 data에 inputNum과 inputNum 를 선언하고 inputNum 정보가 변경할때마다 input에 keyon이나 keydown을 사용하여 메소드를 호출하고 해당 메소드에서 inputNum2 = inputNum + 1 이런식으로 넣어야 한다.

 

그런데 computed를 쓰면 훨씬 간단해 진다.

위의 예제 내용처럼 data에 inputNum을 선언하고 computed에는 inputNum2라는 attribute가 inputNum +1을 return 받도록 선언하였다. 그리고 inpuNum의 정보가 변경하면 자동으로 inputNum2에 inputNum + 1이 저장된다.

 

테스트

button disabled 처리

• button 

HTML 영역

<input type="button" :disabled="nextPageDisabledFlag" value="다음 페이지" @click="goNextPage">

button 영역에 nextPageDisabledFlag를 이용하여 disabled 제어를 하고 click 이벤트를 이용하여 goNextPage 메소드를 호출한다.

 

SCRIPT 영역

computed: {
    idValid () {
      return /^[A-Za-z0-9]+$/.test(this.signup.id)
    },
    nextPageDisabledFlag () {
      if (this.isEmpty(this.signup.id) || this.isEmpty(this.signup.password) || this.isEmpty(this.signup.pwhint) || this.isEmpty(this.signup.pwhintans) || this.isEmpty(this.passwordCheck)) {
        return true
      }
      if (!this.idValid || !this.passwordValidFlag || !this.passwordCheckFlag) {
        return true
      }
      return false
    }
  },
  methods: {
    isEmpty (data) {
      if (data === '' || data === null || data === undefined) {
        return true
      } else {
        return false
      }
    },
    passwordValid () {
      if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,16}$/.test(this.signup.password)) {
        this.passwordValidFlag = true
      } else {
        this.passwordValidFlag = false
      }
    },
    passwordCheckValid () {
      if (this.signup.password === this.passwordCheck) {
        this.passwordCheckFlag = true
      } else {
        this.passwordCheckFlag = false
      }
    }
  }

computed 를 이용하여 nextPageDisabledFlag 정보를 다른 데이터 바인딩시 제어한다. 이전 글의 script를 그대로 사용하기 위해 최대한 수정없이 처리하였다. isEmpty 메소드는 데이터를 입력후 다시 삭제 했을시 데이터 체크를 위해서 빈값('')과 null, undefined 를 체크하는 메소드로 만들었다.

테스트 영상

 

vue.js를 공부하면서 데이터 바인딩시 제어하는 법을 조금씩 공부하여 처리하고 있다. jquery와 다른 방식에 얼른 익숙해져야겠다.