트리구조 데이터 조회 후 데이터 바인딩 질문입니다.

Question

현재 Vue.js를 통해 프론트단에서 데이터 조회 후 트리구조 형식으로 표현, 노드 왼편의 체크박스를 체크 → '선택' 버튼 클릭후의 동작을 구현중입니다. 코드는 아래와 같습니다. 1. 모달 레이어 팝업 中 트리구조 데이터가 표현되는 부분의 코드2.템플릿 코드3. 콤포넌트 코드 Vue.component('dept-tree', {template: '#dept-tree-template',props: {nodes: Array,selectedNode: Object},data() {return {selectedId: null // selectedId 변수 추가};},methods: {toggle(node) {Vue.set(node, 'open', !node.open);// 부모 노드가 닫힌 상태일 때 자식 노드의 open 상태 초기화if (!node.open) {this.closeChildren(node);}},selectNode(node) {// 체크박스 선택 시 selectedNodeId에 선택된 노드의 id를 반영this.selectedNodeId = node.id.toString();// 다른 체크박스들의 선택 상태를 해제this.nodes.forEach(n => {if (n !== node) {Vue.set(n, 'selected', false);}});// 선택된 노드의 ID를 부모 컴포넌트로 전달this.$emit('update:selectedNode', this.selectedNodeId);},closeChildren(parentNode) {// 모든 자식 노드의 open 상태를 false로 설정parentNode.children.forEach(child => {Vue.set(child, 'open', false);});}},watch: {nodes: {handler(newValue, oldValue) {// nodes 배열이 변경될 때마다 실행되는 로직console.log('Nodes changed:');console.log('New Value:', newValue);console.log('Old Value:', oldValue);// 체크된 노드의 ID 출력 및 selectedNode에 저장newValue.forEach(node => {if (node.selected) {this.selectedNodeId = node.id.toString();console.log('Selected Node ID:', this.selectedNodeId);}});},deep: true // 객체의 내부까지 깊게 감시}}}); 4. 노드 체크 후 선택 버튼 클릭시confirmDeptTreeModal() {console.log('Selected Node:', this.selectedNode); // 선택된 노드 확인if (this.selectedNode) {this.pTreeDeptCd = this.selectedNode; // 선택된 노드의 id 값을 문자열로 변환하여 pTreeDeptCd에 저장} else {this.pTreeDeptCd = '00'; // 선택된 노드가 없을 경우 기본 값으로 설정}console.log('pTreeDeptCd:', this.pTreeDeptCd); // pTreeDeptCd 값 확인modal_close('deptTreeModal'); // 모달 닫기},여기서 문제점은, 위의 Watch 부분에서 console.log('Selected Node ID:', this.selectedNodeId); 콘솔로그의 결과값은 정상적으로 출력되지만 이 값을 confirmDeptTreeModal() 메서드의 if (this.selectedNode) {this.pTreeDeptCd = this.selectedNode; // 선택된 노드의 id 값을 문자열로 변환하여 pTreeDeptCd에 저장} else {this.pTreeDeptCd = '00'; // 선택된 노드가 없을 경우 기본 값으로 설정} 부분에서 Null 값으로 나온다는겁니다.ChatGPT에게 이렇게 저렇게 질문을 해보아도 도무지 답이 안나와 이곳에 글을 올려봅니다.. 정돈도 잘 안되고 두서도 없는 글이지만 어느부분에서 문제가 되는것같다 정도의 조언이라도 던져주신다면 정말 감사하겠습니다..

트리구조 데이터 조회 후 데이터 바인딩 질문입니다.

0개의 답변

Q&A 목록