The register mismatch between display value in input and reactive variable
Vue version
3.4.15
Link to minimal reproduction
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 middle a
with A
(select the character and replace). The displayed value has changed to aaAaa
, but the variable value has not changed. If you try to replace a
with B
, the value displayed and the value in the variable will be the same.
https://github.com/vuejs/core/assets/30907920/edf28294-d7a8-4e47-ad7b-4a53588d055e
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
System:
OS: macOS 14.2.1
Browsers:
Chrome: 121.0.6167.85
Firefox: 122.0
Safari: 17.2.1
Any additional comments?
No response
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.
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.
It can be reproduced when change the value of the input from aaa
to aaA
. Because the text.value
is both aaa
((hasChanged(value, oldValue) === false
), so it won't execute trigger
.
@LinusBorg
- Type
aaaaa
into the input field. - Select the middle
a
(using the Shift key or the mouse) and replace it with an uppercaseA
. Observe that the input field showsaaAaa
, but the ref variable does not update. - Now, replace an
a
with a different letter, likeB
, and notice both the displayed value and the ref variable value change accordingly.
@zh-lx So, it turns out that if I want to reliably synchronize a ref variable with an input, I should always use v-model
with @input
and never rely on :value
? Otherwise, discrepancies between the reactive variable and the input's internal value might occur.
这种情况确实存在,因为vue会通过hasChanged
函数判断新旧两个值是否相同来决定是否执行trigger
,但由于你事先将input
元素的值发生了修改,然后将修改后的值传递给ref
,导致hasChanged
函数判断为false
,所以dom
无法及时更新,如果你确实需要对input
的value
属性做出修改后再传递给ref
,那么请你对updateText
函数作出这样的修改:
const updateText = (e) => {
const value = e.target.value;
text.value = value;
text.value = text.value.toLowerCase();
};
先将input
元素的原始值传递给ref
,让hasChanged
函数判断为true
,这样vue就会把effect
放入执行队列中,然后再将text.value
的值修改为你想要的值,这样就可以正确的响应式。且由于vue对effect
做了去重处理,所以你不必担心dom
更新两次。
希望对你有些帮助。
It appears that the source of truth for an <input>
with the :value
prop and @input
handler becomes not the prop itself, but the user's input. Is this architecture intentional and considered desirable behavior?
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 <input>
simply looked at the value from the :value
prop, and user input did not affect anything other than sending input
events and others.
Perhaps there is a more elegant solution; I would appreciate a tip!
This is expected behavior IMO, as when you are assigning text.value = value.toLowerCase()
, the old text.value
and the new text.value
is exactly the same. To Vue this means nothing has changed state-wise, so no updates will happen.
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 v-model
with a watcher.
Appreciating the prompt response, @yyx990803.
Noting a nuance: the <input>
in Vue appears to favor user input over the :value
prop. Wondering if this is intentional and if there's a thought about bringing it in line with the prop's role as the main source? This seems to be a central quirk in the issue.
The central issue here is that there is no update is happening because no reactive state has changed.
Not sure if this fits here, but I have a situation here:
My list is a defineModel
and is being updated by list.value.push(new Item({ ... })
but it won't update on my others components
This image represents the list result:
This image is console.log(list.value.length)
right when I update it:
edit: This is my structure:
- Main with
const list = ref([])
; - Component 1 created in Main with
const list = defineModel('list')
and further in I havelist.value = response.data
- Component 2 created in Main with
const list = defineModel('list')
and further in I havelist.value.push(new Item({ ... })
A watch in main component triggers both changes, but I cannot see it change in the screen.
@NathanAP 由于您给的信息较少,我按照你的言论所述无法复刻你当时的环境,如果可以的话,请给出完整示例。vue.js版本号3.4.19
@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.