Vue Vuetify: Invalid prop: custom validator check failed for prop "value". found in --->

Question

I have form with several text fields that's giving me no issues. But I have this file field Im unable to bind to my model. Any sujestions.

<template>
    <v-form ref="form" @submit.prevent="submit" lazy-validation v-model="valid">
        <v-card outlined>
            <v-card-text>
                <v-file-input
                    type="file"
                    :label="labels.user_header_photo"
                    v-model="form.user_header_photo"
                    :error-messages="errors.user_header_photo"
                    :rules="[rules.required('user_header_photo')]"
                    :disabled="loading"
                    @input="clearErrors('user_header_photo')"
                >
                </v-file-input>

                <v-file-input
                    type="file"
                    :label="labels.user_profile_photo"
                    v-model="form.user_profile_photo"
                    :error-messages="errors.user_profile_photo"
                    :rules="[rules.required('user_profile_photo')]"
                    :disabled="loading"
                    @input="clearErrors('user_profile_photo')"
                >
                </v-file-input>

            </v-card-text>
        </v-card>

        <v-divider class="mb-4 mt-4"></v-divider>

        <v-card>
            <v-card-text>
                <v-text-field
                    :label="labels.user_name"
                    v-model="form.user_name"
                    :error-messages="errors.user_name"
                    :disabled="loading"
                    hint="At least 6 characters"
                    autocomplete="user_name"
                    @input="clearErrors('user_name')"
                ></v-text-field>

                <v-text-field
                    :label="labels.user_subscription_fee"
                    v-model="form.user_subscription_fee"
                    :error-messages="errors.user_subscription_fee"
                    :disabled="loading"
                    autocomplete="user_subscription_fee"
                    @input="clearErrors('user_subscription_fee')"
                ></v-text-field>
            </v-card-text>
        </v-card>

        <v-layout mt-12 mx-0>
            <v-spacer></v-spacer>

            <v-btn
                text
                :disabled="loading"
                :to="{ name: 'profile' }"
                color="grey darken-2"
                exact
            >
                Cancel
            </v-btn>

            <v-btn
                type="submit"
                :loading="loading"
                :disabled="loading"
                outlined
                color="black"
                class="ml-4"
            >
                Save
            </v-btn>
        </v-layout>
    </v-form>
</template>

<script>
    import axios from 'axios'
    import { mapGetters } from 'vuex'
    import { api } from '~/config'
    import Form from '~/mixins/form'

    export default {
        mixins: [Form],

        data: () => ({

            label: {
                user_header_photo: 'Upload cover image',
                user_profile_photo: 'Upload profile photo',
                user_name: 'user_name',
                user_subscription_fee: 'user_subscription_fee',
            },

            form: {
                name: null,
                email: null,
                password: null,
                password_confirmation: null,
                user_name: null,
                user_subscription_fee: null,
                user_info: null,
                user_location: null,
                user_website: null,
                user_profile_photo: null,
                user_header_photo: null,
                user_private_account: null,
                user_fans_counter: null,
                new_subscriber_alert: null,
                new_tip_alert: null,
                new_private_message: null,
                new_refferal_alert: null,
                is_active: null,
            }
        }),

        computed: mapGetters({
            auth: 'auth/user',
            setting: 'auth/setting'
        }),

        mounted() {
            this.form = Object.assign(this.form, this.auth, this.setting)
        },

        methods: {
            submit() {

                if (this.$refs.form.validate()) {
                    this.loading = true

                    axios.put(api.path('profile'), this.form)
                        .then(res => {
                            this.$toast.success('Your profile successfully updated.')
                            this.$emit('success', res.data)
                        })
                        .catch(err => {
                            this.handleErrors(err.response.data.errors)
                        })
                        .then(() => {
                            this.loading = false
                        })
                }
            }
        }
    }
</script>

All fields works as they suppose to too. Only the file fields are giving the same error. The complete app is a SPA using laravel as a backend along with vue, vuex

You should check that `user_header_photo` and `user_profile_photo` are either Object or Array. — IVO GELOV, Feb 21 '20 at 08:32

Rodolfo Merlo Ali · Answer 1 · 2020-06-24T03:50:27.573

11

the solution for you problem is :

for image value in you template

<v-file-input
    v-model="image"
>
</v-file-input>

have to be initial value [] your data variable image like this:

export default {
   data: () => ({
      image:[]
   })
}

regards from Bolivia

edited Jun 24 '20 at 03:50

answered May 18 '20 at 02:56

Rodolfo Merlo Ali

141
1
8

I have exactly the same issue and this solution does not work for me. :X – Vitomir Jan 16 '23 at 15:21

score 8 · Answer 2 · answered Apr 11 '20 at 10:40

Not sure if it's still relevant, but I had the exact same problem.

I just added [] as the initial value for file fields in the form and the error disappears.

In the docs, they say value can be any, which is wrongly documented.

If those fields are not required, you might want to check them manually before submitting.

score 1 · Answer 3 · answered May 01 '20 at 08:02

1

The received value is a type of FILE : https://developer.mozilla.org/fr/docs/Web/API/File , so all you need to do is to check that it's an instance of FILE and not a string.

answered May 01 '20 at 08:02

Alban

23
1
4

score 1 · Answer 4 · answered Jun 28 '21 at 08:01

if u used v-file-input like

<v-file-input
                    type="file"
                    :label="labels.user_profile_photo"
                    v-model="form.user_profile_photo"
                    :error-messages="errors.user_profile_photo"
                    :rules="[rules.required('user_profile_photo')]"
                    :disabled="loading"
                    @input="clearErrors('user_profile_photo')"
                >
                </v-file-input>

change form.user_profile_photo = '' to form.user_profile_photo=[]

Vue Vuetify: Invalid prop: custom validator check failed for prop "value". found in --->

4 Answers4