Question

我们如何重置vuetify的v-input-file？要在每次上传后清除表单输入文件吗？

        <v-file-input
          label="Upload"
          accept="image/*"
          @change="selectFile"
        >
        </v-file-input>

Answer 1

这很简单。首先，有一个道具clearable，它允许用户清除输入。其次，如果将数据模型设置为null，那么输入字段也会被清除。

<div id="app">
  <v-app id="inspire">
    <v-file-input
      v-model="filename"
      clearable="true" 
      label="File input"
      ></v-file-input>
    <v-row justify="center">    
     <v-btn dark
       color="secondary"
       @click="filename = null"
     >Clear</v-btn>
    </v-row>
  </v-app>       
</div>


new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      filename: null,
    }
  },
})

Answer 2

我认为您可以在上传后使用ref来重置文件。

this.$refs.fileupload.value=null

<v-file-input
    ref="fileupload"
          label="Upload"
          accept="image/*"
          @change="selectFile"
        >
        </v-file-input>

Answer 3

添加属性:key="componentKey"并在您的代码中增加它。

   <v-file-input
      label="Upload"
      accept="image/*"
      @change="selectFile"
      :key="componentKey"
    >
    </v-file-input>

在您的JavaScript中

   data() {
      return {
        componentKey: 0
      }
    },
    
    methods: {
      selectFile(event) {
        // your code to deal with event/file
        this.componentKey++;
      }
    }

如何重置Vuetify的V输入文件

3 个答案: