How to clean input in Vue.Js

Question

im have little problem with clean input after functions complete Can someone tell me what im do wrong After functions is complete im try to clean the input But i dont have any result with this this is my code in Vue Component

<form role="form">
  <div class="card-body">
    <div class="form-group">
      <label for="file">Upload File</label>
      <div class="input-group">
        <div class="custom-file">
          <input
            type="file"
            class="custom-file-input"
            id="file"
            ref="file"
            v-on:change="handleFileUpload"
          />
          <label class="custom-file-label" for="file">Choose file</label>
        </div>
      </div>
    </div>
  </div>
  <div class="card-footer">
    <button v-on:click="onClickUploadAccounts" class="btn btn-primary">Upload</button>
    <button v-on:click="onClickSetLoader" class="btn btn-primary">Loader</button>
  </div>
</form>

methods: {
        handleFileUpload(){
            this.file = this.$refs.file.files[0]
        },
        onClickUploadAccounts(){
            let formData = new FormData();
            formData.append('file', this.file);
            this.$store.commit('imports/setIsLoad', true)
            axios.post( '/admin-account-import',
                formData,
                {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
            ).then(() => {
                console.log('SUCCESS!!')
                this.$store.commit('imports/setIsLoad', false)
                this.file = ''
                formData.delete('file')
                formData.append('file', this.file = '')
            })
                .catch(() => {
                    console.log('FAILURE!!');
                });
        },
        onClickSetLoader()
        {
            this.$refs.file.files = ''
        },

    },

did you try to set a data property as v-model to the input and reset it at the end of the process? — salihtopcu
– salihtopcu, Commented May 17, 2020 at 22:07

Birante · Accepted Answer · 2020-05-17 22:43:04Z

2

You need to set this.file to null. in your data

 data: function () { 
  return {
   file: null 
 }
}

And you can remove in your methods

this.file = ''
formData.delete('file')
formData.append('file', this.file = '')

edited May 17, 2020 at 22:43

answered May 17, 2020 at 22:20

Birante

7095 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Birante Over a year ago

Thanks a lot for review Phil !

Collectives™ on Stack Overflow

How to clean input in Vue.Js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related