Как избавиться от двойных кавычек, выводя текущее количество введенных символов?

Question

[Петр Сергеев]

Если в поле "пароль" вводить текст, то снизу будет сообщение о том сколько символов вы ввели. (скриншот для наглядности)


Проболе в том, что текст оборачивается в двойные кавычки, т.к. это свойство объекта computed.
Уже несколько часов пытаюсь разобраться как это решить.
Что я сделал? Я просто взял currentVal из useForm.
Создал computed с именем passwordMessage, чтобы вычислять количество введенных символов
И здесь password: Yup.string().min(6, passwordMessage).required() просто вставляю созданный computed

const passwordMessage = computed(() => {
      return `вы ввели ${currentVal?.password.length} символов`;
    });

    // Using yup to generate a validation schema
    // https://vee-validate.logaretm.com/v4/guide/validation#validation-schemas-with-yup
    const schema = Yup.object().shape({
      name: Yup.string().required(),
      email: Yup.string().email().required(),
      password: Yup.string().min(6, passwordMessage).required(),
      confirm_password: Yup.string()
        .required()
        .oneOf([Yup.ref("password")], "Passwords do not match"),
    });

    const { values: currentVal } = useForm({ validationSchema: schema });

Возможно есть более лучшее решение для этой задачи....

вот полный код
https://codesandbox.io/s/custom-text-input-with-ve...

Answer 1

[0xD34F]

Сообщение об ошибке, согласно документации yup, может быть указано в двух видах - строка или функция. Вычисляемое свойство является объектом, так что чего там с ним будет происходить - непонятно. Поэтому заменим вычисляемое свойство на функцию, которая будет извлекать его значение:

.min(6, passwordMessage) ---> .min(6, () => passwordMessage.value)

Comments

[entermix]

А есть объяснение тому, почему строка оборачивается в кавычки?

[0xD34F]

entermix, откуда у строки могут взяться двойные кавычки? Например, если её в json перегоняли. Такое было моё предположение. Попробовал сделать значение вычисляемого свойства числом - кавычек нет. Объект - получил его json. Ну да. Где конкретно это происходит, надо смотреть исходники yup (upd. или скорее vee-validate - вряд ли yup знает, как извлечь значение из объекта вычисляемого свойства).

[entermix]

0xD34F, спасибо!

[Петр Сергеев]

0xD34F, огромное спасибо. А можете пожалуйста еще чуть подробней объяснить как работает этот прием? Просто не совсем понимаю, что произошло после оборачивания в стрелочную функцию?

[0xD34F]

Петр Сергеев, дополнил ответ.