vue3-tree 트리 컴포넌트 Axios(비동기)로 데이터 가져오기

vue3-tree 트리 컴포넌트 Axios(비동기)로 데이터 가져오기

 

계층 구조 이미지

 

 

vue3-tree 트리 컴포넌트 라이브러리

지난 시간에 vue3-tree 트리 컴포넌트 라이브러리를 이용하여 트리 구조의 데이터를 시각적으로 보여줄 수 있도록 샘플 예제를 구현해보았다. 실제 운영환경에서는 서버에서 알맞은 데이터를 조회하고 가져와서 사용자에게 보여줄 것이다. 현재 사용중인 백엔드가 없으므로 public에 json 데이터를 넣고 Axios 라이브러리를 이용하여 데이터를 가져와 계층구조를 나타내보자.

 

• Axios 설치

> npm install axios

 

 

• JSON 데이터

Axios 라이브러리를 이용하여 조회하기 위해 public 디렉토리안에 data.json과 data-sub.json 파일을 만들어 넣어준다.

 

• data.json

[
    {
      "id": 1,
      "label": "Electronics",
      "nodes": [
        {
          "id": 2,
          "label": "Computers",
          "nodes": [
            {
              "id": 4,
              "label": "Laptops"
            },
            {
              "id": 5,
              "label": "Desktops"
            }
          ]
        },
        {
          "id": 3,
          "label": "Mobile Phones",
          "nodes": [
            {
              "id": 6,
              "label": "Smartphones"
            },
            {
              "id": 7,
              "label": "Feature Phones"
            }
          ]
        }
      ]
    },
    {
      "id": 10,
      "label": "Books"
    }
  ]

 

• data-sub.json

Smartphones의 하위 노드(자식)들로써 label이 'Smartphones'가  클릭될 때만 아래 데이터를 가져온다.

[
  {
    "id": 8,
    "label": "Android"
  },
  {
    "id": 9,
    "label": "iOS"
  }
]

 

 

• App.vue

컴포넌트가 마운트될 때 getData함수를 호출, Axios를 이용해 비동기로 초기 데이터를 가져온다. 그리고 'Smartphones' 라벨이 클릭되면 하위 데이터를 가져오기 위해 getSmartphonesSubData 함수를 호출하여 하위 데이터를 조회한다. findValue 함수를 이용해 주어진 배열을 재귀적으로 탐색하여 해당 노드 발견 시 노드 값을 반환한다.

<template>
	<input v-model="searchText" type="text" />
	<Tree :nodes="data" :search-text="searchText" :use-checkbox="true" :use-icon="true" use-row-delete show-child-count @nodeClick="onNodeClick" />
</template>
<script>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import Tree from 'vue3-tree';
import 'vue3-tree/dist/style.css';

export default {
	components: {
		Tree,
	},
	setup() {
		const data = ref([]);
		const searchText = ref('');

		const onNodeClick = node => {
			if (node.label === 'Smartphones') {
				if (!node.nodes) {
					getSmartphonesSubData(node.id);
				}
			}
		};

		onMounted(() => {
			getData();
		});

		function getData() {
			axios.get('http://localhost:8080/data.json').then(result => {
				data.value = result.data;
				console.log('onMounted : getData')
			});
		}

		function getSmartphonesSubData(id) {
			let node = findNode(data.value, id);

			axios.get('http://localhost:8080/data-sub.json').then(result => {
				node.nodes = result.data;
				node.expanded = true;
				console.log('SmartPhones Node Clicked : getSmartphonesSubData')
			});
		}

		let findNode = (arr, val) => {
			for (let obj of arr) {
				if (obj.id === val) {
					return obj;
				}
				if (obj.nodes) {
					let result = findNode(obj.nodes, val);
					if (result) {
						return result;
					}
				}
			}
			return undefined;
		};

		return {
			data,
			searchText,
			onNodeClick,
		};
	},
};
</script>

<style></style>