Graceful Light

Vue로 생성된 DOM에 Events를 붙여야할 때

2017-11-22


data 값이 변경되고 나서 .hover, .click과 같은 jQuery 이벤트를 붙여야할 때, DOM이 다시 그려진 완료 시점을 잡아야한다.
Vue에서 nextTick 메소드로 이 시점을 잡을 수 있다.
(ajax로 데이터를 가져오지 않고 그려지는 DOM은 mounted 메소드 안에 붙힐 Event 로직을 짜면 된다.)

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
new Vue({
data: {
members: []
},
created: function() {
var vm = this;
axios.get("/members")
.then(function(response) {
vm.members = response.data;
/* promise가 지원되는 환경에서 */
return vm.$nextTick();
// promise 미지원시
/* vm.$nextTick(function() {
$('.members').hover();
});
*/
})
.then(function() {
$('.members').hover();
});
}
})

인스턴스 메소드를 사용하고 싶지 않다면 Vue.nextTick으로 바꿔주면 된다.

🍺

Buy me a beer 🍗

공유하려면 QR코드를 스캔해주세요