[vue] computed로 버튼 validation 체크 로직 구현

지금 만들고 있는 페이지는 어워즈 페이지이다. 매 월 마다 어워즈를 진행하고, 각 어워즈 내 리스트는 당첨작과 참가작으로 구분할 수 있다. 그 중 당첨작은 각 어워즈마다 하나씩 뽑아 포인트를 지급하고, 포인트 지급하기 버튼을 누르면 자동적으로 참가작 (당첨작과는 다른 정책의) 포인트를 지급할 수 있다.
(예를 들어, 당첨작에 포인트 지급하기 버튼을 누르면 자동적으로 당첨작은 1000원, 참가작은 100원 지급 가능)
이미 당첨작이 정해졌다면 포인트 지급하기 버튼은 비활성화가 되어야 한다.

To Do

내가 구현해야 할 부분은 포인트 지급하기 버튼 비활성화 로직이다.

<p-button
  class="point-button"
  width="100%"
  @click="showPointModal()"
  :disabled="!submitDisabled"
>
 지급하기
</p-button>
            
            
computed: {
 submitDisabled(): boolean {
   let isBtnDisabled = false
   if (this.isValueValid()) {
     isBtnDisabled = true
   }
     return isBtnDisabled
   }
}


methods: {
 isValueValid() {
   let validation = false
   if (this.selectImage.idx && this.$route.params.ranking !== 'O') {
     validation = true
   }
     return validation
   },
}

methods로 isValueValid()를 생성하여 this.selectImage.idx 가 있고 ranking이 'O'이 아닐 경우
즉, 이미지를 선택했고, 당첨작이 없을 경우 validation = true 버튼을 활성화로 바꿔준다.
이렇게 조건을 걸어 둔 이유는 저 두 조건(리스트 중 하나라도 선택을 하여 idx가 있어야 하고, params로 전달받은 ranking의 값이 'O'가 아니어야 한다 )에 부합해야지만 버튼을 활성화할 수 있기 때문이다.
computed엔 submitDisabled() 함수를 버튼 validation 체크를 했다.

Refactor

사실 훨씬 더 간단하게 구현해낼 수 있다.

<p-button
  class="point-button"
  :class="{
  whiteBg: submitDisabled == false,
    blueBg: submitDisabled == true
  }"
  width="100%"
  @click="showPointModal()"
  :disabled="!submitDisabled"
>
  지급하기
</p-button>


computed: {
  submitDisabled(): boolean {
    return this.$route.params.ranking !== 'O' &&   this.selectImage.idx != null
  }
}

위와 같이 methods에 함수를 정의하지 않고 computed에 중복되는 로직들을 합쳐 값을 체크해줘야 하는 부분을 return 하면 된다.
그렇다면 훠얼씬 더 간단한 코드로 동작해내는 걸 볼 수 있다.