잡다로그

Vue에서 여러 배열들을 조합해서 만든 복잡한 테이블을 엑셀 파일로 추출하려고 했다. 여러 데이터들이 조합된 것이라 하나의 JSON 데이터만 출력하는게 아니라 table을 그대로 출력하고 싶었다. 사용한 패키지는 XLSX 이다. https://www.npmjs.com/package/xlsx xlsx SheetJS Spreadsheet data parser and writer. Latest version: 0.18.5, last published: 3 months ago. Start using xlsx in your project by running `npm i xlsx`. There are 3114 other projects in the npm registry using xlsx. www.npmjs.co..

리랜더링 문제 해결 - 키 값이 있는 배열의 깊은 복사 핵심부터 말하자면, 페이지 첫 진입 및 랜더링 후 함수 등으로 추가한 요소(element, 배열 data의 내용이든)가 화면에 뜨지 않는다면, update()등을 건드릴 것이 아니라, 변화를 감지하지 못해서 리랜더링이 안되고 있는 것임을 알아두자. 원하는 다중배열(1차는 그냥 배열-2차는 키 값이 있는)을 만들었다. 아래 사진처럼 꽤 복잡.. 우선 v-for로 기본 표를 만들기 위해 위와 같은 복잡한 배열을 만든 것이고, 이제 내용 즉 스케쥴 요소들을 추가해야 한다. addSchedule이라는 함수를 만들어서 서버로부터 받아온 데이터들을 추가해뒀는데, 나름 스프레드 연산자(...)를 사용해서 깊은 복사가 되었겠지 생각했다. 근데 이렇게 요소를 추가하..

검색 버튼을 눌렀을 때 검색하도록 하려면, watch의 속성을 다 지우고, 검색 버튼이벤트에 메소드를 지정해주면 된다. @click="filtered()" 성별 남성 여성 상태 지출 수입 항목 용돈 식비 {{ item.value }} ({{ item.sex == 1 ? '남' : '여' }}/{{ item.state }}) - {{ item.item }}, {{ item.price }}원 코드의 핵심 내용은 - 한 필터에서 아무것도 선택하지 않았을 때의 값은 빈문자열("")로 통일 - 한 필터의 내용이 변경될 때마다, 새로운 filteredData 배열 계산. watch로 필터 변수의 변동감지 - 필터에 값이 있는지를 체크하는데에 !! 사용 - 필터 기능은, 전체 데이터(allData)에 대해 filte..

#1 모달 띄우기-닫기 모달을 꼭 버튼으로만 띄우는 것이 아니라, 원하는 타이밍이 있을 때, 부모에서 자식 컴포넌트에 있는 모달을 띄울 때 유용하다. 1. 함수 이용 this.$bvModal.show('child-modal')// child-modal는 모달 아이디 부모 모달 열기 자식 ... #2 모달에서 Form 전송하기 모달 태그를 b-form으로 감싸준다. 그리고 footer에서 submit 버튼을 만들어줄 때, form="form아이디"로 명시해준다. 작성 모달 글 작성 닫기 #3 하단 footer 디자인하기 1) modal-footer 클래스를 줄 수 있다. 대신 b-modal에 footer-hide 속성을 주지 않으면 footer가 두개로 나온다. 모달 제목 수정 삭제 닫기 2) 또는 slo..