onChange 함수 관련하여

Question

<template v-for=(item, i) in checkListItem :key=i>
  <label for=camera>
               <form>
                    <input
                      type=file
                      id=camera
                      accept=image/*
                      style=display: none
                      @change=e => handleFileInputChange(e, i, item)
                    />
               </form>
</label>
</template>
<script lang=“ts” setup>
const handleFileInputChange = (e, i, item) => {
console.log(checkListItem.value) //콘솔1
console.log(item) //콘솔2
console.log(i) //콘솔3

const files = e.target.files[0]

const reader = new FileReader()
  reader.onload = e => {
    /* 수정필요 */
    item[i].check_file = e.target.result
    item[i].checked = true
  }

reader.readAsDataURL(files)
}
<script>

//콘솔1
checkListItem = [
{checkId: 11, content: ‘체크리스트1’},
{checkId: 12, content: ‘체크리스트2’},
{checkId: 13, content: ‘체크리스트3’},
{checkId: 14, content: ‘체크리스트4’},
{checkId: 15, content: ‘체크리스트5’}
]

handleFileInputChange 함수 실행 시 선택한 checkListItem의 item과 index값을 가져와
선택한 item에 파일 첨부하고싶은데..

현재는 체크리스트4번에 파일을 첨부하면 체크리스트1에 값이 들어옵니다.
콘솔 찍어보면 무조건 첫번째 객체값 부터 찍힙니다.
 //콘솔2 는  {checkId: 11, content: ‘체크리스트1’}, //콘솔3은 0 이 찍힙니다.

ㄱㅎㅁ · Answer

fileList.value 에 push를해서 어떤걸 하나요?

김현진 · Answer

v-for로 생성된 모든 input의 id가 동일하게 camera로 선언되었네요
label의 for와 input의 id를 camera + index와 같은 식으로 고유한 컴포넌트로 생성해주어야 구분될 듯 합니다