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