页面:
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=""
})