Как определить, когда Vue закончил обновление DOM?

Question

Я хочу, чтобы получить доступ к внутреннему <input> элемента после того, как он был создан Vue:

<li v-repeat="subtask: subtasks"> 
    <input v-model="subtask.name" type="text"> 
</li> 

Однако этот код не работает:

/* add a new item (that in turn will create a new DOM node) */ 
subtasks.push({ 
    name: 'wash the dishes', 
    id: 'box-123' 
}); 

/* ... Around now, Vue should get busy creating the new <li> ... */ 

/* Now the element should exist, but it doesn't */ 
console.log(document.getElementById('box-123')); 
// --> null 

Однако, getElementById вызова возвращается пустой handed- - узел в это время не существует.

Когда я могу быть уверен, что Vue создал/обновил DOM?

Answer 1

Vue ПАРТИЙ DOM обновления и выполняет их асинхронно по соображениям производительности. После изменения данных вы можете использовать Vue.nextTick, чтобы дождаться завершения обновлений DOM:

subtasks.push({}); 
Vue.nextTick(function() { 
    // DOM updated 
}); 

Answer 2

Если вю не имеет обратного вызова для этого вы можете использовать MutationObserver слушателя родителя: https://developer.mozilla.org/en/docs/Web/API/MutationObserver