-
-
Notifications
You must be signed in to change notification settings - Fork 8.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
The register mismatch between display value in input and reactive variable #10254
Comments
I can't reproduce the behavior of the video in the linked playground on either Chrome, Safari or Firefox. Please provide more detail and a reproduction that acutally reproduces the issue. also test your reproduction in different browsers, with extensions disabled etc. |
|
@zh-lx So, it turns out that if I want to reliably synchronize a ref variable with an input, I should always use |
这种情况确实存在,因为vue会通过
先将 希望对你有些帮助。 |
It appears that the source of truth for an It seems that developers must "catch up" with the new value, as noted by @YiMo1, through double assignment. This looks odd. For instance, in React (sorry), achieving the same goals does not require extra manipulation: const [text, setText] = React.useState('');
const handleSetText = (e) => {
const value = e.target.value;
if (/^[a-z]*$/.test(value)) setText(value);
}; <input value={text} onChange={handleSetText} /> My question: Is the current approach in Vue considered optimal for handling user input, and are there plans to simplify this aspect to make the behavior more intuitive? P.S. Here is also a real-life example illustrating the consequences of non-obvious behavior, which leads to different solutions, like this one: <input v-model="model" @keydown="onKeydown" /> const onKeydown = (e: KeyboardEvent) => {
if (
regexpPattern.value &&
!regexpPattern.value.test(e.key)
// and many other extra keydown checks
) {
e.preventDefault();
}
}; Here, I omitted the logic with handling the Backspace key, cutting through Cmd+X/Ctrl+X, but it also needs to be additionally described. All of this could be avoided if the Perhaps there is a more elegant solution; I would appreciate a tip! |
This is expected behavior IMO, as when you are assigning Avoiding updates when no state change has happened is fundamental to performance, so this is not something that can or will be changed. You can use either the workaround by @YiMo1 or use |
Appreciating the prompt response, @yyx990803. Noting a nuance: the |
The central issue here is that there is no update is happening because no reactive state has changed. |
This comment has been minimized.
This comment has been minimized.
@NathanAP 由于您给的信息较少,我按照你的言论所述无法复刻你当时的环境,如果可以的话,请给出完整示例。vue.js版本号3.4.19 |
I ended up doing it with Pinia yesterday because I would need to do it anyway 🙃 Anyway, I believe that might be something else I was doing wrong in my logic to make it not update my screen data. I'll edit and mark my comment as not relevant for the discussion. |
I stumbled upon this RFC that might shed some light on the discussion about input behavior in Vue, particularly regarding the concept of input's props as properties or like attributes. It resonates deeply with the issues we're encountering here, especially when it comes to the one-way data flow and the role of props as the source of truth. |
Vue version
3.4.15
Link to minimal reproduction
play.vuejs.org
Steps to reproduce
Create a ref variable with a custom function to update value for it (for example, cast to lowercase) and add an input to do so. Enter the string
aaaaa
and try replacing the middlea
withA
(select the character and replace). The displayed value has changed toaaAaa
, but the variable value has not changed. If you try to replacea
withB
, the value displayed and the value in the variable will be the same.video.mov
What is expected?
The register of the displayed value in the input field corresponds to the value of the reactive variable
What is actually happening?
The register of the displayed value in the input field DOES NOT match the value of the reactive variable
System Info
Any additional comments?
No response
The text was updated successfully, but these errors were encountered: