CODEWITHSUNDEEP
vue.jsvuetify.js
user18540155
user18540155

Reputation:

How to reset a v-input-file with vuetify?

I'm trying to reset my v-input-file when i click on a button. But, i don't see any function to do that. I tried the following commands : (upload_json is the name of my v-input-file)

this.$refs.upload_json.files=[]
this.$refs.upload_json.files=null
this.$refs.upload_json.value=""
this.$refs.upload_json.reset()

For all the commands, I had the same following error :

Uncaught TypeError: proxy set handler returned false for property

Upvotes: 1

Views: 1272

Answers (4)

Vineesh N P
Vineesh N P

Reputation: 29

Try the following

this.$refs.upload_json.$refs.input.value = null

With Vue2, there was no warning as well!

Upvotes: 0

Nabil Ahmad
Nabil Ahmad

Reputation: 221

You can clear input by using this approach

<div id="app">
    <v-app id="inspire">
        <v-file-input
        v-model="files"
        accept="image/png, image/jpeg, image/bmp"
        placeholder="Pick an avatar"
        prepend-icon="mdi-camera"
        label="Avatar"
    ></v-file-input>
   <v-btn @click="restInput">Clear Input</v-btn>
 </v-app>
</div>

main.js

    new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    files:{},
  }),
  methods:{
    restInput(){
      this.files = {}
    }
  }
})

Upvotes: 1

Oleg Naumov
Oleg Naumov

Reputation: 587

You can clear input this way:

this.$refs.upload_json.internalValue = this.multiple ? [] : null

I tested it and it works. If you look at the source of the v-file component, that is how Vuetify developers clear the input when you click on the clear icon.

Upvotes: 0

Ananda Vj
Ananda Vj

Reputation: 181

you can use this.$refs.upload_json.value=null

Upvotes: 0

Related Questions