Input element loses static value when surrounding v-if conditional elements are rendered
Link to minimal reproduction
https://codepen.io/bcass/pen/bGLgLZm
Steps to reproduce
Check the checkbox, which renders the conditional-input-1
and conditional-input-2
inputs.
What is expected?
The hidden input element <input id="static-input" type="hidden" name="static-input" value="IMPORTANT VALUE">
remains unchanged. When the form is submitted, static-input=IMPORTANT VALUE
is sent to the server.
What is actually happening?
The hidden input element changes to <input id="static-input" type="hidden" name="static-input" value>
. When the form is submitted, nothing is sent to the server.
System Info
Reproduced with the latest version of Vue2.
Does not reproduce in the SFC Playground with Vue3.
Any additional comments?
I did some exploration of what conditions seem necessary to reproduce. It seems to affect elements with hard-coded, static values that are between two conditionally rendered elements (the two elements with v-if, in this case) where there's also at least one element with a dynamic value (dynamic-input, in this case) that's also between them.
As a workaround, I can either change value="IMPORTANT VALUE"
to :value="'IMPORTANT VALUE'"
or reorder the elements so the static-input
is not between the two conditional inputs.
Note: When the inputs are type="text"
instead of type="hidden"
, the bug behaves a bit differently. (CodePen: https://codepen.io/bcass/pen/jOZyZEx).
In that case, when the checkbox is checked and the conditional elements render, the static-input
element keeps its value="IMPORANT VALUE"
attribute and the value gets submitted with the form, but the text "IMPORTANT VALUE" visually disappears. So, that's also confusing.