解決vue項(xiàng)目中type=”file“ change事件只執(zhí)行一次的問題
問題描述
在最近的項(xiàng)目開發(fā)中遇到了這樣的一個(gè)問題，當(dāng)我上傳了一個(gè)文件時(shí)，我將獲取到的文件名清空后，卻無法再次上傳相同的文件
<template>
<div class="hello">
<input type="button" value="上傳文件" name="" id="" @click="updata">
<input type="file" style="display:none" @change="getFile" id="input-file">
<div v-if="fileName">
<p>上傳的文件名：{{fileName}}</p>
<button @click="delFile">清空文件</button>
</div>
</div>
</template>
<script>
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.files[0].name
},
delFile(){
this.fileName=''
}
}
}
</script>
因?yàn)槲抑皇菍ata中的屬性值清空而已，文件名沒有變當(dāng)然會(huì)不出發(fā)change事件
解決辦法
目前網(wǎng)上有好多解決辦法，但基本上都無法在vue上使用，于是我想到了v-if
v-if 是“真正”的條件渲染，因?yàn)樗鼤?huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。
于是在代碼中加入了一個(gè)小的開關(guān)，喚起change事件時(shí)就將他銷毀
事件結(jié)束時(shí)再將它重建，這樣問題就輕松的解決了
<template>
<div class="hello">
<input type="button" value="上傳文件" name="" id="" @click="updata">
<input v-if="ishowFile" type="file" style="display:none" @change="getFile" id="input-file">
<div v-if="fileName">
<p>上傳的文件名：{{fileName}}</p>
<button @click="delFile">清空文件</button>
</div>
</div>
</template>
<script>
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=''
}
}
}
</script>
總結(jié)
以上所述是小編給大家介紹的vue項(xiàng)目中解決type=”file“ change事件只執(zhí)行一次的問題，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue.js編譯時(shí)給生成的文件增加版本號(hào)
這篇文章主要介紹了vue.js編譯時(shí)給生成的文件增加版本號(hào)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
關(guān)于Vue 消除Token過期時(shí)刷新頁面的重復(fù)提示問題
很多朋友在token過期時(shí)刷新頁面，頁面長(zhǎng)時(shí)間未操作，再刷新頁面時(shí)，第一次彈出“token失效,請(qǐng)重新登錄!”提示，針對(duì)這個(gè)問題該怎么處理呢，下面小編給大家?guī)碓蚍治黾敖鉀Q方法，一起看看吧2021-07-07
@click指令用于監(jiān)聽元素的點(diǎn)擊事件,并在觸發(fā)時(shí)執(zhí)行相應(yīng)的處理函數(shù),在Vue3中,事件處理就可以通過@click指令來實(shí)現(xiàn),下面我們就來看看如何在Vue3中處理點(diǎn)擊事件吧2023-08-08
在我們?nèi)粘ｉ_發(fā)中經(jīng)常因?yàn)樗季S定式，我們會(huì)犯一些奇怪的錯(cuò)誤，有時(shí)候看似簡(jiǎn)單的問題卻給出了復(fù)雜的解決方案。下面這篇文章主要介紹了vue.js父組件使用外部對(duì)象的方法，這個(gè)看似簡(jiǎn)單卻繞了一些彎路的問題，有必要和大家分享下，需要的朋友可以參考學(xué)習(xí)，下面來看看吧。2017-04-04
Vue3 defineExpose要在方法聲明定義以后使用的教程
這篇文章主要介紹了Vue3 defineExpose要在方法聲明定義以后使用的教程,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
Vue 2.5.2下axios + express 本地請(qǐng)求404的解決方法
下面小編就為大家分享一篇Vue 2.5.2下axios + express 本地請(qǐng)求404的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue+Echarts實(shí)現(xiàn)分時(shí)圖和交易量圖的繪制
近來發(fā)現(xiàn)Echarts?API越發(fā)的強(qiáng)大，對(duì)于繪制各類圖形可以使用Echarts實(shí)現(xiàn)。本文將利用Echarts實(shí)現(xiàn)分時(shí)圖和交易量圖的繪制，希望對(duì)大家有所幫助2023-03-03
Vue項(xiàng)目路由刷新的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue項(xiàng)目路由刷新的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
vue項(xiàng)目中使用rimraf?dev啟動(dòng)時(shí)刪除dist目錄方式
這篇文章主要介紹了vue項(xiàng)目中使用rimraf?dev啟動(dòng)時(shí)刪除dist目錄方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
基于Vue框架vux組件庫實(shí)現(xiàn)上拉刷新功能
這篇文章主要為大家詳細(xì)介紹了基于Vue框架vux組件庫實(shí)現(xiàn)上拉刷新功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11