第解決vue項(xiàng)目中type=”file“change事件只執(zhí)行一次的問題在最近的項(xiàng)目開發(fā)中遇到了這樣的一個問題，當(dāng)我上傳了一個文件時，我將獲取到的文件名清空后，卻無法再次上傳相同的文件

template

div

inputtype="button"value="上傳文件"name=""id=""@click="updata"

inputtype="file"@change="getFile"id="input-file"

divv-if="fileName"

p上傳的文件名：{{fileName}}/p

button@click="delFile"清空文件/button

/div

/div

/template

script

import$from'n-zepto'

exportdefault{

name:'HelloWorld',

data(){

return{

fileName:''

methods:{

updata(){//喚起change事件

$('#input-file').click()

getFile(e){//change事件

this.doSomething()

doSomething(){//dosomething

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

inputtype="button"value="上傳文件"name=""id=""@click="updata"

inputv-if="ishowFile"type="file"@change="getFile"id="input-file"

divv-if="fileName"

p上傳的文件名：{{fileName}}/p

button@click="delFile"清空文件/button

/div

/div

/template

script

import$from'n-zepto'

exportdefault{

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(){//dosomething