JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<button onClick="start(false);">nextTick 미사용</button><button onClick="start(true);">nextTick 사용</button>
<div id="app">
<div v-for="item in list">
<div v-bind:id="bindId(item)">{{item}}</div>
</div>
</div>
<script>
var start;
</script>
CSS
button {
outline:none;
background-color:white;
border:1px solid #6495ED;
color:#6495ED;
border-radius:10px;
padding:5px 10px;
margin:5px;
}
button:hover {
background-color: #6495ED;
color:white;
cursor:pointer;
}
JavaScript
start = function(isNextTick) {
new Vue({
el : '#app',
data : function() {
return {
list : []
};
},
created : function() {
var self = this;
for(var i=0; i<100; i++) {
this._data.list.push(i);
}
if(isNextTick) {
this.$nextTick(function() {
var dom = document.getElementById('item-5');
dom.style.backgroundColor = 'red';
});
} else {
var dom = document.getElementById('item-0');
dom.style.backgroundColor = 'red';
}
},
methods : {
bindId : function(item) {
return 'item-' + item;
}
}
})
}