Javascript Vue:自动UI更新时触发事件

我有一个v-for项目列表，它基于存储在Vuex中的列表。我想要它，以便每次添加新项目时列表自动滚动到底部。我用以下方法计算出了滚动部分：

伪代码如下所示：

addItem(){
    dispatch vuex event to add item
    scroll to bottom of list
}

我遇到的问题是，在列表滚动到底部后，Vue似乎正在更新v-for列表，这意味着列表总是滚动到倒数第二项，而不是最后一项

---

我通过使用

setTimout（）

等待10毫秒来修复它，但感觉有点不舒服。是否有更好的方法触发v-for列表更新上的

scrollToBottom（）

代码？

您需要异步/等待调度

async addItem(){
   await dispatch()
   scroll to bottom of list
}

---

等待下一次渲染的正常方式是使用。下面是一个演示：

newvue({
el:“#应用程序”，
“存储”：新的Vuex.store({
声明：{
项目：[“a”、“b”、“c”、“d”]，
索引：100
},
突变：{
已添加项目（状态）{
state.items.push（String.fromCharCode（++state.index））；
}
},
行动：{
addItem（{commit}）{
提交（'itemAdded'）；
}
}
}),
计算：{
…Vuex.mapState（['items']）
},
mounted（）{this.scrollToBottom（）；}，
方法：{
附加项（）{
此.$store.dispatch（'addItem'）；
这个。$nextTick（（）=>this.scrolltobttom（））；//
this。$nextTick（（）=>{/*scroll to bottom*/}）；
是在Vue中执行此操作的正常方法（）这就是答案！非常感谢！您必须分离关注点。更新函数只需更新存储中的集合。并且在存储getter（或mapState，无论您拥有什么）上的手表内，您可以将列表滚动到底部。还请注意，如果使用“提交”而不是“分派”，它将起作用，因为分派是异步的，而“提交”是同步的。另一个选项是：
dispatch（）。然后（（）=>scroll）
——分派返回一个承诺。@tao，等待分派更改状态是不够的。你需要等待下一次渲染。使用
的示例然后使用
不工作：|使用
$nextTick
工作的示例：@blex你能提交你的
$nexTick（）吗
回答为响应，以便我可以将此标记为已解决？不，等待调度更改状态是不够的。您需要等待下一次渲染。使用
异步
不工作的示例：|使用
$nextTick
工作的示例：@blex我认为使用
$nextTick（）的确切原因
仍然是最佳答案。但它不是作为实际响应发布的，因此我无法将其更改为solvedsorry，我错误地理解了您的问题。dom更新后您需要捕获，您可以执行nextTick或更新的方法。最佳解决方案如您所说$nextTick（）//生命周期方法“更新”//$nextTick方法