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

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

Answer 1

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