IT이야기

Vue에서 입력 정리 방법.Js

cyworld 2022. 4. 12. 00:23
반응형

Vue에서 입력 정리 방법.Js

나는 기능완료후 클린입력에는 거의 문제가 없다. 누군가가 내가 무엇을 잘못하는지 나에게 말해줄수 있다. 기능이 완료된후 나는 입력을 청소하려고 노력한다. 그러나 나는 어떠한 결과도 가지고 있지 않다. 이것은 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 = ''
        },

    },

이걸 맞춰야 돼.무효로 처리하다당신의 데이터로

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

그리고 당신은 당신의 방법에서 제거할 수 있다.

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

참조URL: https://stackoverflow.com/questions/61859400/how-to-clean-input-in-vue-js

반응형