이번에는 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>
속성 값만 삭제했기 때문에 파일 이름이 변경되지 않았다면 당연히 변경 이벤트가 발생하지 않습니다
Solution
온라인에는 많은 솔루션이 있지만 기본적으로 vue에서는 사용할 수 없습니다. v-if가 떠오릅니다
v-if는 "true" 조건부 렌더링입니다. 이는 조건부 블록 내의 이벤트 리스너와 하위 구성 요소가 전환 중에 적절하게 삭제되고 다시 생성되도록 보장하기 때문입니다.
그래서 코드에 작은 스위치를 추가했습니다. 이 스위치는 변경 이벤트가 발생하면 삭제됩니다
이벤트가 종료되면 다시 빌드하여 문제를 쉽게 해결할 수 있도록
<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 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
Vue를 사용하여 Amap을 만들고 실시간 버스 애플리케이션을 구축하는 방법
Vue2x_vue.js를 기반으로 하는 반응형 적응형 캐러셀 구성 요소 플러그인의 VueSliderShow 기능을 사용하는 방법
위 내용은 한 번만 실행되는 vue 프로젝트에서 type='file' 변경 이벤트를 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!