[v4] Two of the same input component

[roosht3]

What happened?

I have a dynamic form which is built on demand with an API Response.

Wrapper.vue

<component
    v-model="element.store.models[element.handle]"
    :is="element.component"
    :key="element.handle"
    :element="element"
></component>

InputText.vue

<template>
<q-input
    v-model="value"
    v-bind="elementProperties"
    :placeholder="element.placeholder"
    :name="element.handle"
    :error="state.firstError.length !== 0 || !!errorMessage"
    :error-message="state.firstError ? state.firstError : errorMessage"
    v-on="{ ...$qoreEvents(element.events) }"
    @update:modelValue="$emit('update:modelValue', $event)"
>
</q-input>
</template>

<script>
const { value, errorMessage } = useField(props.element.handle, props.element.rules, {
    label: props.element.label.toLowerCase(),
    initialValue: props.modelValue,
})

return {
  value,
  errorMessage,
}
<script>

Things are working normally until I introduce the same props.element.handle more than once.

1. one is visible
2. the second one is hidden

basically, everything is InputText.vue components. that are hidden but activated when it goes to a new tab (https://quasar.dev/vue-components/tabs#introduction)

When the hidden tab is activated, it resets all the components to the initial value which was passed to the visible element.

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Demo link

https://codesandbox.io/s/form-inputs-m8ldz?file=/src/App.vue

Code of Conduct

• I agree to follow this project's Code of Conduct

[logaretm]

Do you mind creating a demo for this? you can use codesandbox

[roosht3]

@logaretm Added a codesandbox link

[logaretm]

Thank you for reporting this, The issue was that the field was always configured to use its configured initial value when mounted. While I doubt that you should be using 2 fields of exactly the same name and model at the same time, at least the current value should be priotrized.

The fix will be out in the next patch release for both 4.4.x and 4.5.0-alpha.x

[logaretm]

Update: This might get reverted in 4.5 because it conflicts with other improvements and a previous fix in #3166 . Can you tell me more about your use case with duplicate fields with the same name in the same form?

[roosht3]

We were building a package that showcases some examples with the same fields with different states. such as,

1. readonly
2. label only
3. disabled
   etc. I guess in the real world this won't be a problem. But this was perfectly working on v3 of vee-validate

PS: I've written the reply to this 3 times without pressing the comment button.

[logaretm]

Right, it is possible but you shouldn't include those fields in the same form.

You could use standalone property to mark a field as headless and it won't be included in the form or won't conflict with others of the same name.