fix: support dynamic labels closes #3053

logaretm · Nov 27, 2020 · 31b2238 · 31b2238
1 parent 32bd28c
commit 31b2238
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 11 deletions.
diff --git a/docs/content/api/field.md b/docs/content/api/field.md
@@ -74,14 +74,14 @@ When using `v-slot` on the `Field` component you no longer have to provide an `a
 
 ### Props
 
-| Prop            | Type                           | Required/Default | Description                                                                                                          |
-| :-------------- | :----------------------------- | :--------------- | :------------------------------------------------------------------------------------------------------------------- |
-| as              | `string`                       | `"span"`         | The element to render as a root node, defaults to `input`                                                            |
-| name            | `string`                       | Required         | The field's name, must be inside `<Form />`                                                                          |
-| rules           | `object \| string \| Function` | `null`           | The field's validation rules                                                                                         |
-| validateOnMount | `boolean`                      | `false`          | If true, field will be validated when the component is mounted                                                       |
-| bails           | `boolean`                      | `true`           | Stops validating as soon as a rule fails the validation                                                              |
-| label           | `string`                       | `undefined`      | A different string to override the field `name` prop in error messages, useful for display better or formatted names |
+| Prop            | Type                           | Required/Default | Description                                                                                                                                                                                                                |
+| :-------------- | :----------------------------- | :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| as              | `string`                       | `"span"`         | The element to render as a root node, defaults to `input`                                                                                                                                                                  |
+| name            | `string`                       | Required         | The field's name, must be inside `<Form />`                                                                                                                                                                                |
+| rules           | `object \| string \| Function` | `null`           | The field's validation rules                                                                                                                                                                                               |
+| validateOnMount | `boolean`                      | `false`          | If true, field will be validated when the component is mounted                                                                                                                                                             |
+| bails           | `boolean`                      | `true`           | Stops validating as soon as a rule fails the validation                                                                                                                                                                    |
+| label           | `string`                       | `undefined`      | A different string to override the field `name` prop in error messages, useful for display better or formatted names. The generated message won't be updated if this prop changes, you will need to re-validate the input. |
 
 ### Slots
 

diff --git a/packages/vee-validate/src/Field.ts b/packages/vee-validate/src/Field.ts
@@ -35,6 +35,7 @@ export const Field = defineComponent({
   setup(props, ctx) {
     const rules = toRef(props, 'rules');
     const name = toRef(props, 'name');
+    const label = toRef(props, 'label');
 
     const {
       errors,
@@ -63,7 +64,7 @@ export const Field = defineComponent({
         : ctx.attrs.value,
       // Only for checkboxes and radio buttons
       valueProp: ctx.attrs.value,
-      label: props.label || props.name,
+      label,
       validateOnValueUpdate: false,
     });
 

diff --git a/packages/vee-validate/src/useField.ts b/packages/vee-validate/src/useField.ts
@@ -35,7 +35,7 @@ interface FieldOptions {
   bails?: boolean;
   type?: string;
   valueProp?: MaybeReactive<any>;
-  label?: string;
+  label?: MaybeReactive<string>;
 }
 
 interface FieldState {
@@ -88,7 +88,7 @@ export function useField(name: MaybeReactive<string>, rules: RuleExpression, opt
     let result: ValidationResult;
     if (!form || !form.validateSchema) {
       result = await validateValue(value.value, normalizedRules.value, {
-        name: label,
+        name: unref(label) || unref(name),
         values: form?.values ?? {},
         bails,
       });

diff --git a/packages/vee-validate/tests/Field.spec.ts b/packages/vee-validate/tests/Field.spec.ts
@@ -678,6 +678,41 @@ describe('<Field />', () => {
     expect(span?.textContent).toBe('true');
   });
 
+  // #3053
+  test('labels can be set dynamically', async () => {
+    const label = ref('label');
+    const message = (field: string) => `${field} is not valid`;
+
+    mountWithHoc({
+      setup() {
+        const rules = (_: any, { field }: any) => message(field);
+
+        return {
+          rules,
+          label,
+        };
+      },
+      template: `
+        <Field name="field" :rules="rules" :label="label" v-slot="{ errors, field }">
+          <input v-bind="field" type="text">
+          <span>{{ errors[0] }}</span>
+        </Field>
+    `,
+    });
+
+    await flushPromises();
+    const input = document.querySelector('input') as HTMLInputElement;
+    setValue(input, '1');
+    await flushPromises();
+    expect(document.querySelector('span')?.textContent).toBe(message(label.value));
+
+    label.value = 'updated';
+    await flushPromises();
+    setValue(input, '2');
+    await flushPromises();
+    expect(document.querySelector('span')?.textContent).toBe(message(label.value));
+  });
+
   // #3048
   test('proxies native listeners', async () => {
     const onBlur = jest.fn();