Vue Vuetify：无效的道具：道具“值”的自定义验证器检查失败。在 ---> <VFileInput> 中找到

Question

我有几个文本字段的表单，这没有给我带来任何问题。但是我有这个文件字段我无法绑定到我的模型。任何猜测。

<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>

所有字段都按他们的设想工作。只有文件字段给出了相同的错误。完整的应用程序是一个使用 laravel 作为后端以及 vue、vuex 的 SPA

Answer 1

你的问题的解决方案是：

用于模板中的图像值

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

必须是初始值 [] 您的数据变量图像，如下所示：

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

来自玻利维亚的问候

Answer 2

不确定它是否仍然相关，但我遇到了完全相同的问题。

我刚刚添加[]为表单中文件字段的初始值，错误消失了。

在文档中，他们说valuecan be any，这是错误记录的。

如果不需要这些字段，您可能需要在提交前手动检查它们。