Блог

Есть ли способ в приложении vuejs3 с vee-validate и yup показать пользовательское сообщение об ошибке? Я делаю выбор ввода с помощью заполнителя:

               <Field
                name="published"
                as="select"
                class="form-control editable_field"
                v-model="formSelectionPublished">
                <option value="" disabled selected>- Select Category -</option>
                <option v-for="(categoryPublishedLabel) in categoryPublishedLabels" :key="categoryPublishedLabel.code">
                  {{categoryPublishedLabel.label}}
                </option>
              </Field>
              <ErrorMessage name="published" class="validation_error"/>

...
      const categoryEditValidationRules = Yup.object().shape({
        published: Yup.string().max(100).required().notOneOf(['- Select Category -']).label('Category published')
  

и это работает нормально, но единственное, что мне нужно, чтобы заменить сообщение об ошибке :

Опубликованная категория не должна иметь одно из следующих значений: — Выберите категорию —

Я хотел бы показать сообщение об ошибке, требуемое для поля…

В package.json :

«vee-validate»: «^ 4.0.0-beta.18», «vue»: «^ 3.0.0», «yup»: «^ 0.29.3»

Спасибо!

похоже, что валидаторы yup принимают второй аргумент в качестве пользовательского сообщения об ошибке. Итак, решение :

   published: Yup.string().max(100).required().notOneOf(['- Select Category -'], 'Category published is a required field')
  

Это сработало для меня!