vue.js axios로 데이터 가져와서 이벤트 걸기

vue.js의 라이프사이클 이해한 후 보기

요약하자면

1. axios로 api를 호출하여 데이터를 가져온 후

2. 해당 데이터를 eventbus를 이용하여 다른 컴포넌트로 값을 넘겨준다.

3. 2번의 그 다른 컴포넌트에서는 eventbus를 created()에서 받아 데이터를 연결해준 후, 원래 걸려있던 이벤트 해제

4. updated()에서 다시 이벤트를 건다.

--------------------------------

webpack, axios, eventbus, datatable를 이용해서

회원을 검색하면 회원검색api를 호출하여 회원정보데이터를 가져온 후

그 결과값을 다른 컴포넌트에 값을 넘기고, datatable을 이용하여 테이블리스트를 만들어줘야하는 상황

검색하는 부분(usersearch.vue)

<template>
	...
	<input type="text" class="form-control" id="userSearchInput" placeholder="회원을 입력해주세요" @keyup="search = $event.target.value">
	<span class="input-group-btn">
		<button type="button" class="btn btn-info btn-flat" @click="getPosts">검색</button>
	</span>
	...
</template>
<script>
export default {
	name: 'user-usersearch',
	data: function(){
		return {
			search: ''
		}
	},
	methods: {
		getPosts: function () {
			this.$http.get('api주소/user_search/' + this.search).then((result) => {
				console.log(result)
				this.$EventBus.$emit('posts', result.data)
			})
		}
	}
	...
}
</script>

데이터 받아서 뿌려주는 부분(info.vue)

<template>
...
<tr v-for="post in posts" v-bind:key="post.id">
	<td>{{post.id}}</td>
	<td>{{post.name}}</td>
	<th>{{post.address}}</th>
	<td>{{post.phone}}</td>
	<td>{{post.mail}}</td>
	<td>{{post.profile}}</td>
</tr>
...
</template>
<script>
	var vm = this
	export default {
		name: 'user-info',
		data: function(){
			return {
				posts: []
			}
		},
		created() {
			var vm = this
			this.$EventBus.$on('posts', function (data) {
				vm.posts = data

				$('#userDelete').removeClass('disabled')
				$('#postList').DataTable().destroy()
			})
		},
		updated() {
			this.$nextTick(function () {
				$('#postList').DataTable()
			})
			
		},
		mounted() {
			$('#postList').DataTable()
		}
	}

</script>

created()는 data와 events가 활성화되어 접근할 수 있는 훅이라고 한다. 그래서 이벤트 버스는 created안에 넣어주는 것이고,

데이터를 가져왔으면 이미 걸려있는 datatable(이벤트)을 해제시켜준다.

그리고 updated()는 컴포넌트의 데이터가 변하여 재 렌더링이 일어날 때 실행되는 훅이라고 한다. 따라서 이벤트 버스를 잡아서 데이터의 변화가 감지되었을 때 datatable(이벤트)를 다시 걸어준다.

nextTick은 모든 화면이 렌더링된 후 실행하는 것을 보장함으로 저기 안에 넣어주면 된다.