How in vuejs3 app with vee-validate 4 to make controls like textarea, checkbox, radio ?

[sergeynilov]

Hello, In my vuejs3 app I use vee-validate 4 (with yup), like

    <Form @submit="onSubmit" :validation-schema="categoryEditValidationRules" class="categoryEdit">
         <label class="col-form-label" for="title">Title
             <span class="required" aria-required="true"> * </span>
         </label>
         <Field
             id="title"
             name="title"
             type="input"
             v-model="formTitle"
             class="form-control editable_field"
             placeholder="Unique string text"
             autocomplete=off
         />

If there is a way with vee-validate for vuejs3 to generate input controls like textarea, checkbox, radio selection, dropdown (multi) selection ?

If yes, please give refes to such examples...

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

Thanks!

[logaretm]

You can find that information here:

https://vee-validate.logaretm.com/v4/api/field

and the examples have multiple various types of inputs

https://vee-validate.logaretm.com/v4/examples/checkboxes-and-radio

Let me know if the docs can be improved to make this easier to find.

[sergeynilov]

Thanks, reading the docs I would like to see more examples, like links to fiddle... 1) I managed to create dropdown selection with options based on array

categoryPublishedLabels = [
  {
    code: 1,
    label: 'Published'
  },
  {
    code: 0,
    label: 'Not Published'
  }
]
...
              <Field
                name="published"
                as="select"
                class="form-control editable_field"
                v-model="formPublished">
                <option v-for="(categoryPublishedLabel) in categoryPublishedLabels" :key="categoryPublishedLabel.code">{{categoryPublishedLabel.label}}</option>
              </Field>
              <ErrorMessage name="published" class="validation_error"/>

But when option is selected, formPublished is filled with .label property, not .code. If there is a way to fill formPublished with .code ? 2) How to create a checkbox? I found this https://vee-validate.logaretm.com/v4/examples/checkboxes-and-radio link, but it has different format : <v-field ... ?