[Vue.js] 조건부 렌더링과 버튼 활성화하기

v-show 조건부 디렉티브를 이용하여, vue 에서 페이지가 번호가 1을 벗어나면, 해당 설정 버튼 값을 제어하지 못하도록 하려고 한다.

 

v-show는 조건부 디렉티브로서, 반환 값이 true와 false 값을 가진다.

 

다른 값은 들어갈 수 없다.

 

true : 화면이 보여짐

false: 화면이 안보임

 

*하지만, 개발자 모드로 보면, 버튼이 삭제되지 않는 것을 확인할 수 있다. 대신, 값이  false가 되면, span 태그 위에 있는 ::before  이 사라진다. 

 

 

• 사용전

• 사용후

 

처음에, this 를 잘 못 사용해서 계속 버튼이 활성화가 안되었는데, 이유를 알았다.

 

 

사실, Vue.js 에서는 조건문을 이용하여 조건부 렌더링을 할 수 있다. v-if, v-else, v-else-if 구문이 있다. 하지만, 비교할 조건이 1개이고, 굳이 html 소스 코드 보기를 해도 보이지 않게 할 이유가 없기 때문에 간편하게 v-show 를 이용하여 버튼을 제어하려고 했다.

 

*참고로, v-if 또한 내부적으로 코드가 true, false 두 값만 가질 수 있다.

하지만, false 일 때, 렌더링을 하지 않고, DOM에서 사라지는 반면에,

v-show 같은 경우는 무조건 렌더링이 되고, display:none; 로 처리가 된다.

 

 

아무튼, 중요한 것은 상태 관리를 위해 Vuex State에 상태 정보를 가지고 있고, 자식 컴포넌트에서 해당 값을 토대로 버튼을 제어하려고 했다. 처음에 생각한 방식은, Store 에 설정 값을 보여주는 것에 대한 참 거짓을 구분하는 상태 변수를 하나 만들고, mutation 을 통해서, 페이지 값이 1이 아닌 경우에 값을 변경해주려는 로직을 구성했다.

 

Vuex 에서는 state의 값을 변경시키기 위해서는, mutation을 거쳐서 변경해야한다. 그렇게 동기 처리를 하기 때문에 다음과 같이 해당 로직을 구성했다.

 

 

 

그리고 버튼 값을 제어하기 위해서 다음과 같이 구성했다. 사실 별 생각없이, 느낌대로 코드를 적었었다. 역시, 컴파일은 되지만, 원하는 화면 렌더링이 실패했고....

 

 

그렇게 계속 원인 분석을 하다가, Vue에서 Vuetify가 제공하는 btn 에서는 State 상의 변수에 대해서 접근하려고 하는 경우에는 {{ }} 일반적인 p태그나 h태그 등과 같이, 화면에서 보여지는 공간에서는 this 를 붙여서 표현한다.

 

하지만, 그 값을 참고해서 사용하려고 하는 경우에, this를 사용하면 안돼는 것이었다.


그렇다면 어떤 방법을 ...

 

바로 this를 제거하고, 다음과 같이 작성하는 것이다.

 

참고로, v-if나 v-show는 표현만 다르고 같이 사용할 수 있는 개념이니 다음과 같이 작성했다.

 

 

드디어, 화면이 정상적으로 뜬다.

 

참고로, disabled 나 :complete 등과 같은 방법을 써도 되지만, 간단하게 조건부 렌더링을 사용해서 해당 화면을 처리해보았다.