如何确定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呼叫空手而归 - 当时节点不存在.

我什么时候可以确定Vue已经创建/更新了DOM？

Answer 1

由于性能原因,Vue批处理DOM更新并异步执行它们.数据更改后,您可以使用Vue.nextTick等待DOM更新完成:

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

如果您在this可用的组件方法(以及对组件的引用)中使用它,您可以使用:

this.$nextTick(function () {
  // DOM updated
});

参考文献:

Vue.nextTick

vm.$nextTick