vue前端——文件类型输入框自动清空 实现及vue cannot set property ‘value‘ of null报错处理

页面：

html代码：

实现：一开始想法是在取消按键里绑定清空方法，仅设置了将上面两个箭头指向的v-model置为 “”,但是报错，再次点击选取文件时，就无法选取同样的文件。错误原因在于，文件输入框作为一个dom，要将文件本身清空，不仅是将name置空。

js代码：

this.addModelName = "";
this.modelFileName = "";

改为：

this.addModelName = "";
this.modelFileName = "";
document.getElementById("oFile1").value="";  //原生方法读取并置空

注意：该段置空代码位置也不应该放在取消按钮绑定方法里，应该放在每次点开弹窗时，开始就置空。另外需要注意，因为页面dom加载速度的问题，直接在弹窗flag=true后加代码会报错：vue cannot set property 'value' of null

解决办法：加nextTick方法

this.$nextTick(function(){
          this.addModelName = "";
          this.modelFileName = "";
          document.getElementById("oFile1").value=""
        })