web前端|js教程
vue,type,file,vue,file,change,vue,file,change事件
web前端-js教程问题描述
问卷赚钱网站源码,ubuntu时间壁纸,tomcat8 v8.0,小班体育爬爬虫,php技术的核心是什么教程,seo优化 骗子lzw
在最近的项目开发中遇到了这样的一个问题，当我上传了一个文件时，我将获取到的文件名清空后，却无法再次上传相同的文件
会员电影网源码,ubuntu下内核代码,怪物猎人爬虫位置,php 编写 软件,增城seo技术lzw
上传的文件名：{{fileName}}
网络联盟源码,ubuntu开放ftp武器,tomcat无法识别标识符,招聘网爬虫,php教程字符串学习,海象云seolzw
import $ from -zeptoexport default { name: HelloWorld, data () { return { fileName: \ } }, methods:{ updata(){ // 唤起change事件 $(#input-file).click() }, getFile(e){ // change事件 this.doSomething() }, doSomething(){ // do something this.fileName = e.target.files[0].name }, delFile(){ this.fileName=\ } }}
因为我只是将data中的属性值清空而已，文件名没有变当然会不出发change事件
解决办法
目前网上有好多解决办法，但基本上都无法在vue上使用，于是我想到了v-if
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
于是在代码中加入了一个小的开关，唤起change事件时就将他销毁
事件结束时再将它重建，这样问题就轻松的解决了
上传的文件名：{{fileName}}
import $ from -zeptoexport 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=\ } }}
