@223606322
начинающий web-разработчик

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

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

Проболе в том, что текст оборачивается в двойные кавычки, т.к. это свойство объекта 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...
  • Вопрос задан
  • 155 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Сообщение об ошибке, согласно документации yup, может быть указано в двух видах - строка или функция. Вычисляемое свойство является объектом, так что чего там с ним будет происходить - непонятно. Поэтому заменим вычисляемое свойство на функцию, которая будет извлекать его значение:

.min(6, passwordMessage) ---> .min(6, () => passwordMessage.value)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы