如何確定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

如果VUE沒有這種回調，你可以在父使用MutationObserver聽衆：https://developer.mozilla.org/en/docs/Web/API/MutationObserver