Comment gérer l'événement de changement type="file" dans le projet vue qui n'est exécuté qu'une seule fois

Cette fois, je vais vous montrer comment gérer l'événement de changement type="file" qui n'est exécuté qu'une seule fois dans le projet vue. Quelles sont les précautions à prendre pour gérer l'événement de changement type="file" dans le projet vue qui est. exécuté une seule fois. Ce qui suit est un cas pratique.

Description du problème

J'ai rencontré un tel problème lors du développement récent d'un projet lorsque j'ai téléchargé un fichier, j'ai effacé le nom du fichier obtenu, mais je ne peux pas télécharger le même fichier. encore une fois

<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>

Parce que je viens d'effacer les valeurs d'attribut​​dans les données et que le nom du fichier n'a pas changé, bien sûr, l'événement de changement ne sera pas déclenché

Solution

Il existe de nombreuses solutions sur Internet, mais en gros elles ne peuvent pas être utilisées sur vue, alors j'ai pensé à v-if

v-if est un rendu conditionnel « Vrai », car il garantit que les écouteurs d'événements et les sous-composants du bloc conditionnel sont détruits et recréés de manière appropriée pendant le changement.

J'ai donc ajouté un petit commutateur au code, qui le détruira lorsque l'événement de changement sera appelé

Reconstruisez-le à la fin de l'événement, afin que le problème soit facilement résolu

<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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser Vue pour créer Amap et créer une application de bus en temps réel

Comment utiliser l'implémentation basée sur Vue2x Plug-in de composant de carrousel adaptatif réactif VueSliderShow function_vue.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!