Vuetify `v-file-input` 在选择文件后立即提交文件，而不是在点击提交后答案

【问题标题】：Vuetify `v-file-input` submits file immediately after file is selected instead of after hitting submitVuetify `v-file-input` 在选择文件后立即提交文件，而不是在点击提交后
【发布时间】：2021-01-28 21:05:43
【问题描述】：

我有一个 Vue 组件，它捕获来自用户的文件输入。我希望文件输入打开文件浏览器，用户可以在其中选择有效的文件类型，然后将该文件显示为所选文件作为芯片。当用户点击submit时，我希望调用axios将文件提交到后端。

问题在于，一旦从文件浏览器中选择了文件，就会进行 axios 调用——无需用户单击提交。我仍在学习如何在 Codepen 中建立一个虚拟项目。不过，我的应用程序确实可以正常运行该组件。

import { store, mutations } from "../../store.js"
import * as vuetify from "https://cdn.skypack.dev/vuetify@2.4.3";
import * as axios from "https://cdn.skypack.dev/axios@0.21.1";

export default {
  data() {
    return {
      upDocs: '',
      files: [],
      file: '',
      formData: new FormData()
    }
  },
  
  methods: {
    submitFile() {
      var FormData = require('form-data');
      var data = new FormData();
      data.append('File', this.file);
      
      var config = {
        method: 'post',
        url: 'https://someServer.com:8101/path/to/controller',
        headers: {
          'Content-Type' : 'multipart/form-data',
        },
        data : data
      };
      
      axios(config)
        .then(response => {
          console.log(JSON.stringify(response.data));
      })
    }
  }
  
}

Codepen

【问题讨论】：

标签： vue.js axios vuetify.js

【解决方案1】：

您正在尝试将 click-handler 与 v-bind shorthand 绑定，如下所示：

<v-btn :click="submitFile()">

这实际上是将一个名为click 的属性绑定到submitFile() 的结果（该方法被立即调用）。

您可能打算像这样使用v-on shorthand：

<v-btn @click="submitFile()">

<!-- or -->
<v-btn @click="submitFile">

【讨论】：