解決vue項目中type=”file“ change事件只執(zhí)行一次的問題
更新時間：2018年05月16日 08:33:38 作者：七尚
這篇文章主要介紹了vue項目中解決type=”file“ change事件只執(zhí)行一次的問題,本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下
問題描述
在最近的項目開發(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>
因為我只是將data中的屬性值清空而已，文件名沒有變當(dāng)然會不出發(fā)change事件
解決辦法
目前網(wǎng)上有好多解決辦法，但基本上都無法在vue上使用，于是我想到了v-if
v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內(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項目中解決type=”file“ change事件只執(zhí)行一次的問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
ElementUI?el-table?樹形數(shù)據(jù)的懶加載的實現(xiàn)
當(dāng)面對大量數(shù)據(jù)時,一次性加載所有數(shù)據(jù)可能會導(dǎo)致性能問題,我們可以實現(xiàn)樹形數(shù)據(jù)的懶加載,本文主要介紹了ElementUI?el-table?樹形數(shù)據(jù)的懶加載,感興趣的可以了解一下2024-06-06
理解Proxy及使用Proxy實現(xiàn)vue數(shù)據(jù)雙向綁定操作
這篇文章主要介紹了理解Proxy及使用Proxy實現(xiàn)vue數(shù)據(jù)雙向綁定操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要給大家介紹了關(guān)于關(guān)閉eslint檢查和ts檢查的相關(guān)資料,eslint是一個JavaScript的校驗插件,通常用來校驗語法或代碼的書寫風(fēng)格,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
解決echarts echarts數(shù)據(jù)動態(tài)更新和dataZoom被重置問題
這篇文章主要介紹了解決echarts echarts數(shù)據(jù)動態(tài)更新和dataZoom被重置問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本文主要介紹了element日期組件實現(xiàn)只能選擇小時或分鐘，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了vue配置font-awesome5的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
因為近日在學(xué)習(xí)并使用VUE,客戶有一個要求,要輸入框可模糊查詢并帶有下拉提示的應(yīng)用,數(shù)據(jù)從接口取,下面這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)模糊查詢filter()的相關(guān)資料,需要的朋友可以參考下2023-04-04
詳解vue2父組件傳遞props異步數(shù)據(jù)到子組件的問題
本篇文章主要介紹了vue2父組件傳遞props異步數(shù)據(jù)到子組件的問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了在vue自定義組件中使用?v-model指令詳情，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-06-06
vue-cli3.0 axios跨域請求代理配置方式及端口修改
這篇文章主要介紹了vue-cli3.0 axios跨域請求代理配置方式及端口修改,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10