Heim > Web-Frontend > js-Tutorial > Hauptteil

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

php中世界最好的语言
Freigeben: 2018-05-29 14:23:33
Original
3636 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!