How to validate field via Vee-Validate?

[koddr]

Hello!

Some question here.. I use your component for upload one image in my form. All fields validated via Vee-Validate (simple reqired attribute). Can I validate vue-dropzone component too via Vee-Validate (latest version)? How?

Any examples are welcome! 👍 Thanks.

[psychonetic]

Hi,

you can do this easy. I have a component, which wraps the vue-dropzone. See below: Vue-Dropzone Wrapper:

<template>
<div class="input--group">
        <label class="input--group--label">{{label}}</label>
        <dropzone id="dropzone"
                  ref="dropzone"
                  :options="options"
                  :name="name"
                  @vdropzone-success="uploadDone"
                  @vdropzone-removed-file='remove'
                  :destroyDropzone="true"/>
        <p class="input--group--error" v-if="hasError">{{ error }}</p>
    </div>
</template>

Furthermore you should have a value prop. Whenever a file have been succesfully uploaded or removed, you should emit an input event. In your parent component you can do this:

<v-uploader
                :url="uploadUrl"
                :mimes="uploader.mimes"
                :remove-url="removeUrl"
                v-model="form.file"
                v-validate="'required'"
                data-vv-name="file"
                data-vv-as="SEPA-Mandat"
                :has-error="hasError('file')"
                :error="collectErr('file')"
                label="File">
        </v-uploader>

Note: I have some custom methods inside vee-validator to handle also laravel form validation errors. Here is a gist with complete code: https://gist.github.com/psychonetic/9b01d2b1eb04b9654d8c2627a2b1bcb5

If you have any questions, feel free to ask :)

[rowanwins]

Thanks so much for sharing @psychonetic - I'll think I'll add this to the docs