如何使用 vuetify 重置 v-input-file？答案

【问题标题】：How to reset a v-input-file with vuetify?如何使用 vuetify 重置 v-input-file？
【发布时间】：2022-08-22 20:17:05
【问题描述】：

当我点击一个按钮时，我试图重置我的 v-input-file。但是，我没有看到任何功能可以做到这一点。我尝试了以下命令：（upload_json 是我的 v-input-file 的名称）

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

对于所有命令，我有相同的以下错误：

未捕获的 TypeError：代理集处理程序为属性返回 false

你能和我们分享更多你的代码吗？也许做一个codepen，你可以通过vuetify使用这个链接：template.vuetifyjs.com

标签： vue.js vuetify.js

【解决方案1】：

您可以使用这种方法清除输入

<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 = {}
    }
  }
})

【讨论】：

【解决方案2】：

你可以使用this.$refs.upload_json.value=null

【讨论】：

相同的错误：TypeError：代理集处理程序为属性返回 false

【解决方案3】：

您可以通过以下方式清除输入：

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

我测试了它并且它有效。如果您查看 source of the v-file component，这就是 Vuetify 开发人员在您单击 clear 图标时清除 input 的方式。

【讨论】：

【解决方案4】：

尝试以下

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

使用 Vue2，也没有警告！

【讨论】：