我需要帮助,因为我正在使用Vue 3开发一个自动完成组件,我遇到了一个我不能理解的行为.

我的组件发出"update:search"事件,它更新父组件中的搜索变量,还有"change"事件,它将用户的输入字符串作为参数.这两个事件都在"keyup"事件上触发.

在父组件中,我监听自动完成的"Change"事件并触发搜索功能.至此,我正确地检索了我的输入字符串,到目前为止一切似乎都运行得很好.然而,当我进行API调用时,偶尔,我在键盘上输入的内容不再与我在搜索函数中检索的内容同步.

以下是该问题的图解.当我试着输入"Hello world"时

enter image description here

根据我的观察,当我从父级修改AutoComplete组件的属性时,就会出现这个问题.如果我修改了AutoComplete组件中未使用的变量,则不会出现问题.

您可以通过以下链接重现该问题: https://stackblitz.com/edit/vuepic-vue-datepicker-udxicv?file=README.md

你知道会发生什么事吗? 感谢您的反馈.

推荐答案

好了,我做完了.

我已经在输入v模型上使用的组件中创建了一个局部变量,并且我正在关注该变量的变化,以向父变量发出UPDATE:Search事件.

通过这样做,不会再有同步问题.我只需确保搜索props 和局部变量的值保持同步.

我已经将工作文件添加到演示存储库中,以防有人想要查看.

Javascript相关问答推荐

没有输出到带有chrome.Devtools扩展的控制台

Google Apps脚本中的discord邀请API响应的日期解析问题

当试图显示小部件时,使用者会出现JavaScript错误.

无法使用单击按钮时的useState将数据从一个页面传递到另一个页面

IF语句的计算结果与实际情况相反

WhatsApp Cloud API上载问题:由于MIME类型不正确而导致接收&Quot;INVALID_REQUEST";错误

React.Development.js和未捕获的ReferenceError:未定义useState

TypeError:无法读取未定义的属性(正在读取';宽度';)

基于产品ID更新条带产品图像的JavaScript命中错误

OnClick更改Json数组JSX中的图像源

不同表的条件API端点Reaction-redux

P5.js中的分形树

ngOnChanges仅在第二次调用时才触发

用另一个带有类名的div包装元素

如何使用[ModelJSON,ArrayBuffer]调用tf.loadGraphModelSync

未捕获的不变违规:即使在使用DndProvider之后也应使用拖放上下文

我无法在Api Reaction本机上发出GET请求

固定动态、self 调整的优先级队列

递增/递减按钮React.js/Redux

如何在预览中显示html+css与数据URL?