Блог

Я использую это внутри v-формы, которая находится внутри v-диалога:

 
    <v-file-input
        v-model="referencefile"
        clearable
        show-size
        label="Attach Reference Letter"
        @change="uploadref"
    >
    </v-file-input>

 

uploadref() выполняет загрузку в firebase, и после этого загрузка работает нормально
Я отправляю форму, она работает без ошибок, но когда я пытаюсь сбросить форму с помощью:

 
    this.$refs.form.reset();

 

Я получаю эту ошибку в консоли:

 
    vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'name' of undefined"
    
    found in
    
    ---> <VFileInput>
           <VForm>
             <VCard>
               <VThemeProvider>
                 <VDialog>
                   <Userform>
                     <VToolbar>
                       <VSimpleTable>
                         <VData>
                           <VDataTable>
                             <Adminview> at src/views/Adminview.vue
                               <VContent>
                                 <VApp>
                                   <App> at src/App.vue
                                     <Root>
    warn @ vue.runtime.esm.js?2b0e:619
    logError @ vue.runtime.esm.js?2b0e:1884
    globalHandleError @ vue.runtime.esm.js?2b0e:1879
    handleError @ vue.runtime.esm.js?2b0e:1839
    invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
    invoker @ vue.runtime.esm.js?2b0e:2175
    invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
    Vue.$emit @ vue.runtime.esm.js?2b0e:3888
    set @ VFileInput.ts?e8de:108
    reset @ index.ts?91bf:220
    eval @ VForm.ts?24e7:89
    reset @ VForm.ts?24e7:89
    close @ Userform.vue?6370:412
    eval @ Userform.vue?6370:440
    Promise.then (async)
    submit @ Userform.vue?6370:437
    invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
    invoker @ vue.runtime.esm.js?2b0e:2179
    invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
    Vue.$emit @ vue.runtime.esm.js?2b0e:3888
    click @ VBtn.ts?0eff:156
    invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
    invoker @ vue.runtime.esm.js?2b0e:2179
    original._wrapper @ vue.runtime.esm.js?2b0e:6917
    vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'name' of undefined
        at VueComponent.uploadref (Userform.vue?6370:361)
        at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
        at VueComponent.invoker (vue.runtime.esm.js?2b0e:2175)
        at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
        at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3888)
        at VueComponent.set [as internalValue] (VFileInput.ts?e8de:108)
        at VueComponent.reset (index.ts?91bf:220)
        at eval (VForm.ts?24e7:89)
        at Array.forEach (<anonymous>)
        at VueComponent.reset (VForm.ts?24e7:89)

 

Я также получаю ту же ошибку, если пытаюсь очистить загрузку файла и выбрать новый файл без отправки формы.

Я нашел решение, которое, похоже, работает в этом случае. Проблема, по-видимому, заключается в том, что при очистке формы она снова активирует событие onChange в v-file-input. Поскольку ввод очищается при сбросе формы, данные становятся неопределенными и при отправке в функцию загрузки вызывают ошибку.

Я добавил проверку, чтобы увидеть, был ли файл данных (referencefile) неопределенным перед выполнением функции загрузки.

 if (this.referencefile !== undefined){
  // execute the upload
}