728x90 반응형 v-show2 [Vue.js] v-if & v-show 변경(update)되지 않는 버그 해결하기 v-if 또는 v-show로 지정한 변수의 값을 변경해도 화면에서 조건부 렌더링이 정상적으로 반영되지 않는 문제가 종종 발생한다.. 다양한 원인 및 해결 방법Vue에서 렌더링 버그에는 다양한 원인이 있을 수 있으니 아래의 4가지 방법을 확인하자. 1. Html과 Vue에서 같은 Vue객체를 바라보고 있는지 확인Vue.js를 활용하는 다양한 방식이 있지만 보통 Html, JSP와 같은 화면에 데이터를 바인딩하여 처리한다.데이터 바인딩이 정상적으로 이루어지려면 당연하게도 HtmlVue.js가 같은 데이터 객체를 바라보고 있어야 하는데 종종 Html에서 Vue 객체를 잘못 바라보고 있는 경우가 있다.Hello World위와 같이 사용하고자 하는 변수를 가지고 있는 Vue 객체를 정확하게 선언해주자. 2.. 2024. 8. 27. [Vue.js] v-if & v-show 조건부 렌더링의 차이점 화면에서 데이터 변경 사항이 바로 반영되지 않는 이슈 해결하기,, 우선 이슈에 대해 간단히 설명하자면 화면에서 사용 안함 버튼을 클릭하면 바로 톱니바퀴 모양의 버튼이 사용자가 클릭할 수 없도록 Disabled 처리된 버튼으로 바뀌어야 되는데 사용 안함 버튼을 클릭해도 바뀌지 않는 현상이 발생하였다.이 문제는 테스트 중 사용 안함 버튼을 클릭 후 페이지를 새로고침 하면 정상적으로 변경 사항이 반영되었다. 값에 따라 Disabled 버튼이 보여지는 기능인 Vue.js의 조건부 렌더링 기능인 v-if를 사용 하여 개발되어 있었기 때문에 렌더링 관련 문제인 것으로 파악되어 Vue.js의 조건부 렌더링에 대해 찾아보다 v-show라는 것도 있다는 것을 알게되어 v-if 대신 v-show를 적용하여 쉽게 해결할.. 2024. 6. 27. 이전 1 다음 728x90 반응형
