验证必填字段是否具有在vue.js中单击上传按钮时的值

Question

我在下面做了一个代码，允许用户上传.csv文件，但是在他可以上传任何文件之前，我要进行一些验证：就像他已经选择了一些必需的输入一样。而且我不知道该怎么做。

<input type="file" accept=".csv" ref="file" v-on:input="handleUpload()" id="upload-csv" />

这是用户界面中的显示，是必填字段：

<div class="list-filter box-fill" style="text-align: center;">

  <a @click="filter('date')" :class="{ active :  active_col == 'date'}">
      <label>date</label>
      <span>{{this.csvDate}}</span>
  </a>
  <a @click="filter('name')" :class="{ active : active_col == 'name'}">
      <label>name</label>
      <span>{{this.csvName}}</span>
  </a>
  <a @click="filter('start_time')" :class="{ active : active_col == 'start_time'}">
      <label>start_time</label>
      <span>{{this.csvStart}}</span>
  </a>
</div>

用户只需从A-AZ中选择字母即可。

data(){
    return{
        csvDate:'',
        csvName:'',
        csvStart:'',
    }
},
methods:{
    handleUpload(){
        //do the verification here
        if(this.csvDate == '' || this.csvName == '' || this.csvStart == ''){
             console.log("Input required fields.");
        }
    },
}

但是只有在选择文件后才会触发此操作。我要验证的是必填字段，然后单击“上传”按钮。