[Vuejs]-How to use vee validate with textarea

by

4👍

Here’s a full working example:

<template>
  <Field v-slot="{ field, errors }" v-model="comment" name="comment" rules="required">
    <textarea v-bind="field" name="comment"/>
    <div v-if="errors[0]">{{errors[0]}}</div>
  </Field>
</template>

<script lang="ts">
import { Field } from 'vee-validate';
import { defineRule } from 'vee-validate';
import { required } from '@vee-validate/rules';

export default {
  components: { Field },
  data() {
    return {
      comment:''
    }
  },
  created() {
    defineRule('required', required);
  }
};
</script>

Things you were missing:

  • Rules ("required"), otherwise Vee Validate has nothing to do
  • v-slot errors – get the errors so you can show them
  • v-model on the Field (and a data element in your Vue component)
👤Ryley

2👍

You can add just prop as to Field component like this:

<Field as="textarea" name="description" id="description" cols="30" rows="10"/>

Here is API for Field component to rendering simple fields with ‘as’ prop

👤Otabek Mansurov

Leave a comment