多平台统一管理软件接口,如何实现多平台统一管理软件接口
431
2023-02-04
解决vue项目中type=”file“ change事件只执行一次的问题
问题描述
在最近的项目开发中遇到了这样的一个问题,当我上传了一个文件时,我将获取到的文件名清空后,却无法再次上传相同的文件
上传的文件名:{{fileName}}
import $ from 'n-zepto'
export default {
name: 'HelloWorld',
data () {
return {
fileName: ''
}
},
methods:{
updata(){ // 唤起change事件
$('#input-file').click()
},
getFile(e){ // change事件
this.doSomething()
},
doSomething(){ // do something
this.fileName = e.target.kKlbRlbefiles[0].name
},
delFile(){
this.fileName=''
}
}
}
因为我只是将data中的属性值清空而已,文件名没有变当然会不出发change事件
解决办法
目前网上有好多解决办法,但基本上都无法在vue上使用,于是我想到了v-if
v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
于是在代码中加入了一个小的开关,唤起change事件时就将他销毁
事件结束时再将它重建,这样问题就轻松的解决了
上传的文件名:{{fileName}}
import $ from 'n-zepto'
export default {
name: 'HelloWorld',
data () {
return {
fileName: '',
ishowFile: true,
}
},
methods:{
updata(){ // 唤起change事件
$('#input-file').click()
this.ishowFile = false // 销毁
},
getFile(e){ // change事件
this.doSomething()
this.ishowFile = false // 重建
},
doSomething(){ // do something
this.fileName = e.target.files[0].name
},
delFile(){
this.fileName=''
}
}
}
总结
以上所述是给大家介绍的vue项目中解决type=”file“ change事件只执行一次的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~