[英]Vue Vuetify: Invalid prop: custom validator check failed for prop "value". found in ---> <VFileInput>
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
完整的应用程序是一个使用 laravel 作为后端以及 vue、vuex 的 SPA
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来自玻利维亚的问候
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.在文档中,他们说
value
可以是any
,这是错误记录的。
If those fields are not required, you might want to check them manually before submitting.如果不需要这些字段,您可能需要在提交前手动检查它们。
接收到的值是一种 FILE 类型: https : //developer.mozilla.org/fr/docs/Web/API/File ,因此您需要做的就是检查它是否是 FILE 的实例而不是字符串。
if u used v-file-input like如果你使用 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>
change form.user_profile_photo = '' to form.user_profile_photo=[]将 form.user_profile_photo = '' 更改为 form.user_profile_photo=[]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.