element input 选中 但值未及时回显

2023-12-18 15:44:25

这可能是因为 Vue 的渲染更新机制。Vue 使用异步更新队列,当你观察到数据变化时,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环 “tick” 中,Vue 刷新队列并执行实际(已去重的)工作。

在你的情况下,当你选择分包合同的值时,可能是因为 Vue 还没有来得及更新 DOM,所以你看不到新的值。当你在其他输入框输入内容时,触发了 Vue 的更新机制,所以你可以看到分包合同的新值。

你可以尝试使用 Vue 的 nextTick 方法来解决这个问题。nextTick 方法用于延迟回调在下次 DOM 更新循环结束之后执行。在修改数据之后立即使用这个方法,获取更新后的 DOM。例如:

this.baseForm.fkProjectContractPurchase = newValue;
this.$nextTick(() => {
  // DOM 现在更新了
  // `this` 绑定到当前实例
  this.$refs.myInput.value = newValue;
});

文章来源:https://blog.csdn.net/qq_41220477/article/details/135062584
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。