Vee-validate: v4: Field label is not watched

[cexbrayat]

Versions

• vee-validate: 4.0.1
• vue: 3.0.3

Describe the bug

The label of a Field is currently not watched, so even if it changes (for example when a user switches to another locale), the error message is still displaying the old label.

To reproduce
Let's consider a component like this:

<template>
  <h1>Register</h1>
  <Form>
    <Field as="input" rules="required" name="login" :label="label" />
    <ErrorMessage name="login" as="div"/>
    <button @click="label = 'other'">Change label</button>
  </Form>

</template>

<script>
import { ref } from 'vue';
import { defineRule, ErrorMessage, Form, Field } from 'vee-validate'
import { required } from '@vee-validate/rules'

defineRule('required', required);

export default {
  components: {
    Form,
    Field,
    ErrorMessage
  },
  setup() {
    const label = ref('login');
    return { label }
  }
}
</script>

repro: https://github.com/cexbrayat/vee-infinite-loop/pull/4
Run:

• yarn
• yarn dev
• Click on the button to change the label
• Clear the input to display the error message: the old label is displayed.

Expected behavior

The label should display the updated version in the error message when it changes.

[logaretm]

This is by design, re-generating messages is not implemented in v4 at the moment. As an alternative, you may re-validate the field.

Reasons for this that it would break consistency when using function or yup rules. So at the moment, it is in userland instead.

I wouldn't say changing a locale in run-time is a very common thing to do. What's your use case?

[cexbrayat]

Thank you fror your answer.

We have an application that uses vue-i18n and allows the user to switch the locale to her/his preference (which vue-i18n offers out of the box). We are also setting the locale of the vee-validate messages by using setLocale from @vee-validate/i18n. The messages are correctly displaying in the new locale when we revalidate, but the label is still displaying the initial version.

Consider the following messages:

generateMessage: localize({
    en: {
      messages: {
        required: context => `The ${context.field} is required.`
      }
    },
    fr: {
      messages: {
        required: context => `Le champ ${context.field} est obligatoire.`
      }
    }
  })

They will display The login field is required in EN. Then if the user switches to FR, it will display Le champ login est obligatoire. and still use login instead of the translated version of the label that we give to the field (handled by vue-i18n: :label="t('register.login')").

I think it would make sense that when switching the locale, the messages use the new versions of the label.

[logaretm]

I misunderstood, you are right the new value should be picked up after re-validation. Will see what I can do.

[logaretm]

Tagged 4.0.2 with this.

[cexbrayat]

It works o/, thanks @logaretm !