[Vue.js] 배열과 오브젝트의 데이터 변경 후 화면 갱신이 안될 때 해결방법(v-if, v-show가 동작하지 않을 때)
데이터를 배열또는 오브젝트 타입으로 선언 후 더보기 버튼( 한번 더 누르면 닫기 버튼)을 누를 때 마다 서버로 부터 데이터를 받아서 처리하도록 기능 추가를 하고 있었다....
[vue.js+vuetify.js] modal dialog( 모달 창, 팝업창)를 만드는 샘플 예제 코드
기존에 사용중인 것이 아닌 UI가 변경된 다이얼로그 창 ( alert 창 ) 을 하나 새롭게 만들어야하는 상황이 왔다. 기획서 작성하는 분에게 , 기존 UI를 벗어난...
[Vue.js + vuetify.js] 토글 버튼(v-btn-toggle)혹은 버튼(v-btn) 동적으로 생성하기 : 토글 버튼 여러개를 선택하는 방법
뷰티파이의 토글 버튼(v-btn-toggle) 과 버튼(v-btn)을 동적으로 생성하는 방법에 대해 알아봅니다. 서버에서 가져온 JSON 타입의 데이터 부분은 생략합니다. 아래의 스니펫과 같이 vue파일에 하드코딩하는 방식으로 대부분의 태그를 사용하게...
[Vue.js + vuetify.js] 탭(tab)에서 선택될 탭을 동적으로 처리하여 활성화 하는 방법
vuetify.js에서 제공하는 탭을 사용중에 있다. 탭을 구성하는 기본 태그는 <v-tabs>, <v-tab> 이다. 조건에 따라 페이지가 보여질 때 선택적으로 탭을 변경해야한다. 정상적으로 동작하지 않아 2시간 째...
[Vue.js] filter(필터) 기본 사용법 및 전역 filter 설정 방법: 검색 필터 샘플 스크립트 및 돈 콤마 찍기 스크립트
Vue.js는 필터(filter)를 사용하여 텍스트의 형식화를 적용할 수 있다. 가령, 숫자 3자리 수 마다 콤마 찍기(돈 표기법), 또는 텍스트로 입력받은 값을 날짜형식으로 포맷팅하거나, 입력받은 문자를 모두...
[Vue.js] Vue 인스턴스 수명주기(Lifecycle Diagram) 테스트 해보기
뷰 인스턴스의 수명주기를 확인하기 위해 console.log()로 출력해 본 예제입니다. 아래 HTML 파일을 다운받은 후 크롬브라우저나 익스플로어에서 열면 확인할 수 있어요. 파일을 연 후 F12키를 눌러...
[Vue.js] (arrow function)화살표 함수()=> 사용시 this는 Window객체를 바인딩한다, Vue 인스턴스가 아니다.
Vue.js에서 화살표 함수(arrow function) 사용과 일반 함수 사용 방법은 매우 간단하지만 애로우 함수를 사용하는 경우 표현방식이 햇갈리는 경우가 발생하여 공부를 하게되었다. 그러면서 우연히 computed() 에서...
[Vue.js 기초] 반복문 v-for 예제로 마스터하기(key, index 등)
Vue.js에서 사용하는 반복문에 대해 알아봅니다. 배열이든, 객체이든 반복해서 출력해야 할 경우 v-for 디렉티브를 사용하게됩니다. 샘플코드를 보고 따라하는 방법이 가장 빠르게 배우는 지름길입니다. 눈으로 본 자료는...
[Vue.js] 조건문 v-if, v-else-if, v-else 사용법과 v-show 디렉티브와의 차이점
Vue.js에서 사용하는 조건문에 대해 알아봅니다. v-if를 사용하여 조건에 따른 조건부 렌더링이 가능합니다. 비교할 조건이 하나라면 v-if만 사용하여 처리하며, 2가지 일 경우, v-if와 v-else를 사용합니다. 2개...
[Vue.js] JSFiddle 웹사이트에서 코드 작성 및 실행 결과 확인
Vue.js 개발 환경을 PC에 설정하는 방법도 있으나, 웹사이트에서 바로 코드 작성 및 실행결과를 확인할 수 있는 사이트가 있어서 소개합니다. 개발자들이라면 누구나 아는 바로 그 jsfiddle...
