Ошибка при рендеринге: «TypeError: Невозможно прочитать свойство« длина »из неопределенного» с помощью fileupload

Question

Наряду с этой ошибкой

Invalid prop: custom validator check failed for prop "value".

found in

---> <VFileInput>

У меня есть некоторые проблемы, связанные с проверкой и загрузкой файлов. Он выдает эти ошибки несколько раз при загрузке страницы. Остальная часть моей формы работает нормально. Мой Laravel бэкэнд сохраняет имя файла в каждой записи для user_header_photo и user_profile_photo. Моя форма разделена на несколько компонентов и работает.

   <template>
<div>
  <v-form ref="form" @submit.prevent="submit" lazy-validation v-model="valid">
    <v-card outlined>
      <v-card-text>
        <ValidationProvider name="user_header_photo" rules="image" v-slot="{ errors, validate }">
        <v-file-input
          @change="validate"
          :label="labels.user_header_photo"
          v-model="form.user_header_photo"
          :error-messages="errors.user_header_photo"
          :disabled="loading"
          @input="clearErrors('user_header_photo')"
        >
        </v-file-input>
        </ValidationProvider>

        <ValidationProvider name="user_profile_photo" rules="image" v-slot="{ errors, validate }">
        <v-file-input
          show-size
          @change="validate"
          :label="labels.user_profile_photo"
          v-model="form.user_profile_photo"
          :error-messages="errors.user_profile_photo"
          :disabled="loading"
          @input="clearErrors('user_profile_photo ')"
        >
        </v-file-input>
        </ValidationProvider>

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

          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>
</div>
</template>

<script>
import axios from 'axios'
import { mapGetters } from 'vuex'
import { api } from '~/config'
import Form from '~/mixins/form'
import { ValidationProvider, extend } from 'vee-validate';
import { image } from 'vee-validate/dist/rules';

extend('image', image);

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: '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,
    }
  }),
  components: {
    ValidationProvider
  },
  computed: mapGetters({
    auth: 'auth/user',
    setting: 'auth/setting'
  }),

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

  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>