vue プロジェクトで一度だけ実行される type='file' 変更イベントを処理する方法-jsチュートリアル-php.cn

vue プロジェクトで一度だけ実行される type='file' 変更イベントを処理する方法

php中世界最好的语言

リリース： 2018-05-29 14:23:33

オリジナル

3672 人が閲覧しました

今回はvueプロジェクトで一度だけ実行されるtype="file"変更イベントの対処方法vueで一度だけ実行されるtype="file"変更イベントの対処方法についてお届けします。以下に実際のケースを見てみましょう。

問題の説明

最近のプロジェクト開発中にこのような問題が発生しました。ファイルをアップロードしたときに、取得したファイル名をクリアしましたが、同じファイルを再度アップロードできませんでした

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

ログイン後にコピー

属性値をクリアしただけなので。データ内のファイル名が変更されていない場合、当然、変更イベントはトリガーされません

解決策

ネット上には解決策がたくさんありますが、基本的にvueでは使えないので、 v-if が思い浮かびます

v-if は、条件ブロック内のイベントリスナーとサブコンポーネントが切り替え中に適切に破棄され、再作成されることを保証するため、「真」の条件付きレンダリングです。

そこで、変更イベントが呼び出されたときに破棄される小さなスイッチをコードに追加しました

問題が簡単に解決できるように、イベントが終了したら再構築してください

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

ログイン後にコピー

読んだ後はマスターしたと思いますこの記事のケース方法、さらに興味深い情報については、php 中国語 Web サイトの他の関連記事にご注意ください。

推奨書籍:

Vue を使用して Amap を作成し、リアルタイムバスアプリケーションを構築する方法

Vue2x ベースのレスポンシブアダプティブカルーセルコンポーネントプラグインの使用方法VueSliderShow function_vue.js

以上がvue プロジェクトで一度だけ実行される type='file' 変更イベントを処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。