개발자
input type="file" 사용법
<template> ...(생략) <label for="camera" class="btn btn-purple btn-square btn-lg col-6 right-border" v-if=" imageYn === 'N' && imageYn === null" > 사진 촬영 </label> //class가 조건에 따라 달라짐. <label for="camera" class="btn btn-secondary btn-square btn-lg col-6 right-border" v-if=" imageYn === 'Y' " > 사진 촬영 </label> <input type="file" id="camera" accept="image/*" capture="camera" style="display: none" @change="onFileSelected" /> <button class="btn btn-secondary btn-square btn-lg col-6 left-border" @click="rightButton" v-if="status === '방전 시작'" > 방전 완료 </button> ...(생략) </template> <script setup lang="ts"> const imageYn:string = ref('') console.log('2', imageYn.value) //사진촬영 const onFileSelected = event => { const file = event.target.files[0] if (file) { imageYn.value = 'Y' console.log('1') console.log('imageYn', imageYn.value) console.log('yes file', file) } else { imageYn.value = 'N' console.log('imageYn', imageYn.value) console.log('no image') } } </script> 결과 사진 찍기 전 -> imageYn ='N' 이거나 null일 경우-> class에 btn-purple 적용 카메라를 실행하여 사진을 찍었을 경우 -> imageYn='Y' -> class에 btn-secondary 적용 / disable처리도 되야함 문제점 사진촬영 후 console 1번은 'Y' 찍히되 2번엔 null입니다. 도와주세요!
답변 1
안녕하세요! 문제를 해결하기 위해서는 몇 가지 추가적인 정보가 필요할 것 같습니다. 현재 코드에서 imageYn 변수의 초기값이 어떻게 설정되어 있는지, 그리고 onFileSelected 함수가 호출되는 조건이 어떻게 되는지 등을 알려주시면 더욱 정확한 답변을 드릴 수 있을 것 같습니다. 하지만 일단 현재 코드에서 문제가 있어 보이는 부분은 v-if 구문의 조건입니다. imageYn 변수가 'N'이거나 null일 경우에만 btn-purple 클래스가 적용되도록 하려고 하셨지만, 이는 의도하신 대로 동작하지 않을 수 있습니다. imageYn 변수의 초기값이 null인 경우에는 v-if 구문이 참이 되지 않으므로 해당 버튼이 렌더링되지 않을 것이고, 초기값이 'N'인 경우에는 v-if 구문이 참이 되지만 btn-purple 클래스가 적용되는 것은 의도하신 대로 동작할 것입니다. 하지만 onFileSelected 함수에서 imageYn 변수를 'Y'로 설정하게 되면서 v-if 구문의 조건이 거짓이 되어 버튼이 제거되었다가 다시 렌더링됩니다. 이 때 imageYn 변수의 값이 'Y'인 상태에서 다시 렌더링되는데, 이때 v-if 구문의 조건이 참이 되므로 btn-secondary 클래스가 적용됩니다. 따라서 imageYn 변수가 변경되었을 때 버튼이 다시 렌더링되도록 하기 위해서는 v-if 구문 대신에 v-show 구문을 사용하거나, imageYn 변수를 null이 아닌 다른 값으로 초기화하도록 변경하시면 됩니다. 또한 버튼이 다시 렌더링될 때 disable 처리를 하기 위해서는 disabled 속성을 추가하여야 합니다. 다음은 v-show 구문을 사용하는 예시 코드입니다. 이 코드에서는 v-show 구문을 사용하여 버튼을 숨기고 보여주는 방식으로 변경하였습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24<template> ... <label for="camera" class="btn btn-purple btn-square btn-lg col-6 right-border" v-show="imageYn === 'N' || imageYn === null" > 사진 촬영 </label> <label for="camera" class="btn btn-secondary btn-square btn-lg col-6 right-border" v-show="imageYn === 'Y'" > 사진 촬영 </label> <input type="file" id="camera" accept="image/*" capture="camera"
커리어리 AI 봇의 답변을 평가해 주세요!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!