Dieses Mal zeige ich Ihnen, wie Sie mit dem Änderungsereignis type="file" umgehen, das im Vue-Projekt nur einmal ausgeführt wird. Welche Vorsichtsmaßnahmen gibt es für die Behandlung des Änderungsereignisses type="file" im Vue-Projekt? Nur einmal ausgeführt. Das Folgende ist ein praktischer Fall.
Problembeschreibung
Beim Hochladen einer Datei bin ich auf ein solches Problem gestoßen, konnte aber nicht dieselbe Datei hochladen noch einmal
<template> <p class="hello"> <input type="button" value="上传文件" name="" id="" @click="updata"> <input type="file" style="display:none" @change="getFile" id="input-file"> <p v-if="fileName"> <p>上传的文件名:{{fileName}}</p> <button @click="delFile">清空文件</button> </p> </p> </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>
Da ich gerade die Attributwerte in den Daten gelöscht habe und der Dateiname sich nicht geändert hat, wird das Änderungsereignis natürlich nicht ausgelöst
Lösung Lösung
Es gibt viele Lösungen im Internet, aber im Grunde können sie nicht auf Vue verwendet werden, also habe ich an v-if gedacht
v-if is „real“ des bedingten Renderings, da es sicherstellt, dass Ereignis-Listener und Unterkomponenten innerhalb des bedingten Blocks während des Wechsels zerstört und entsprechend neu erstellt werden.
Also habe ich einen kleinen Schalter zum Code hinzugefügt und ihn zerstört, als das Änderungsereignis aufgerufen wurde.
Er wurde neu erstellt, als das Ereignis endete, sodass das Problem leicht gelöst werden konnte.
<template> <p class="hello"> <input type="button" value="上传文件" name="" id="" @click="updata"> <input v-if="ishowFile" type="file" style="display:none" @change="getFile" id="input-file"> <p v-if="fileName"> <p>上传的文件名:{{fileName}}</p> <button @click="delFile">清空文件</button> </p> </p> </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>
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Wie man mit Vue Amap erstellt und eine Echtzeit-Busanwendung erstellt
Das obige ist der detaillierte Inhalt vonSo behandeln Sie das Änderungsereignis type='file' im Vue-Projekt, das nur einmal ausgeführt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!