Share the knowledge

최근 작업을 하다보니 팝업을 띄워서 작업하는 부분을 구현해야 할 일이 있었는데, 그때 부모 컴포넌트의 데이터를 가져올 때 생겼던 이슈에 대해서 정리해보려고 한다. 대략 내가 구현했던 화면은 위 그림과 같았고, popup에서 특정 action시 mainview의 데이터를 수정해줘야 하는 기능이 필요했고, 코드는 대략 다음과 같은 구성이였다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 //생략 button action ((doc) => { var vue = new Vue..

vue js를 이용하여 화면단을 개발하던 도중 keyup 이벤트를 이용하여 필터하는 기능을 구현해야 했는데, 이 기능을 서버단에서 처리할지 클라이언트단에서 처리할지 고민하다가 결국 클라이언트단에서 처리하기로 결정하고(필터되는 부분이 복잡하고 자원이 많이들었다면 서버단에서 처리했을 것 같긴하다.) 코드작성을 시작헀는데, 처음에는 v-model과 v-on:keyup 이벤트를 이용해서 다음과 같이 작성했었다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 {{item}} (function() { let vm = new Vue({ el: '#vi..

view단 작업을 하던도중 radio버튼을 클릭했을 때 값이 변경된 후 다음로직이 수행되는 부분을 구현해야 했는데, 처음에는 @click(v-on:click)이벤트를 이용해서 작업하다보니 내 생각과는 다르게 작동했다. 의도했던것은 @click가 눌렸을 때 해당 태그의 값이 변경되고, function이 실행될 것 같았는데, 막상 실행해보니 click이벤트가 발생한 뒤 값이 변경되었는데, 이 부분을 코드로 보면 다음과 같다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 // 값이 변경된 후 함수가 실행되게 하고싶으면 @change를 사용... //스크립트 최대한 간략화함... let vm = new Vue({ el..

Vue를 이용해서 Front-End 개발 작업을 진행하다보면 특정 태그의 Dom을 직접 컨트롤 하고 싶을 떄가 있다. 물론 자바스크립트의 querySelector를 이용해서 dom에 접근할 수 있겠지만, 뷰에서도 dom에 접근할 수 있는 방법이 있기 떄문에 vue.js에서 dom에 접근 하는 방법을 정리하려고 한다. 일단 다음과 같은 input태그가 있다고 가정했을 때 해당 input태그에서 비밀번호 유효성체크를 하는 과정에서 조건을 만족하지못하면 해당 input태그에 포커싱되게 하고싶다면 태그에 ref속성만 추가해주면 된다. 해당 태그에 ref속성을 추가했다면 스크립트 코드에서는 $refs를 통해 접근하면 되겠다. // 생략 password : function() { alert('비밀번호 유효성체크')..

최근 vue.js를 이용해 개발을 할 수 있는 기회가 생겨서 vue.js로 개발을 하고있다, 이전엔 jquery + handlebar.js를 이용해 개발하고 있었는데, 서로 비슷한 부분이 꽤 있어서 적응하는데 많은 어려움을 겪고 있진 않지만 처음사용하는 프레임워크이다보니 생소한 부분이 있어서 정리를 해보고자 한다. 내게서 발생한 문제는 리스트 안에 서브리스트가 존재할 떄 view를 그릴 떄 서브리스트이 값들만큼 td가 생성되어야 하는데 vue.js에서는 어떻게 이중포문을 돌려야 할지 모르겠다는 것이였다. 따라서 리서치를 해본결과 다음과 같았다. handlebar.js에서 이중포문을 돌릴 땐 이렇게 사용했는데, {{#each list}} {{#each list}} 버튼 {{/each}} {{/each}} ..