Rumah > hujung hadapan web > tutorial js > vue项目中type=”file“ change事件只执行一次怎样处理

vue项目中type=”file“ change事件只执行一次怎样处理

php中世界最好的语言
Lepaskan: 2018-05-29 14:23:33
asal
3725 orang telah melayarinya

这次给大家带来vue项目中type=”file“ change事件只执行一次怎样处理,处理vue项目中type=”file“ change事件只执行一次的注意事项有哪些,下面就是实战案例,一起来看一下。

问题描述

在最近的项目开发中遇到了这样的一个问题,当我上传了一个文件时,我将获取到的文件名清空后,却无法再次上传相同的文件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

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

Salin selepas log masuk

因为我只是将data中的属性值清空而已,文件名没有变当然会不出发change事件

解决办法

目前网上有好多解决办法,但基本上都无法在vue上使用,于是我想到了v-if

v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

于是在代码中加入了一个小的开关,唤起change事件时就将他销毁

事件结束时再将它重建,这样问题就轻松的解决了

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

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

Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

怎样操作Vue做出高德地图搭建实时公交应用

怎样使用基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能_vue.js

Atas ialah kandungan terperinci vue项目中type=”file“ change事件只执行一次怎样处理. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan