如何清理Vue.Js中的输入

时间:2020-05-17 22:02:37

标签: vue.js vuejs2 vue-component vuex

在功能完成后,IM的干净输入几乎没有问题 有人可以告诉我即时消息做错了什么 功能完成后,请尝试清理输入 但是我没有任何结果 这是我在Vue组件中的代码

<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 = ''
        },

    },

1 个答案:

答案 0 :(得分:2)

您需要将数据中的 this.file设置为空。

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

您可以在方法中删除

this.file = ''
formData.delete('file')
formData.append('file', this.file = '')
相关问题