So behandeln Sie das Änderungsereignis type='file' im Vue-Projekt, das nur einmal ausgeführt wird

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

Anleitung Verwenden Sie die Vue2x-basierte Implementierung. Responsives adaptives Karussellkomponenten-Plug-in VueSliderShow function_vue.js

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!