vuetify v-char closable @click:close 문제 해결좀

24.02.02 17:48 작성 조회수 80

0

<div >

<div >이미지 첨부</div>

<div >

<div >

<input type="file" id="inputFile" multiple @change="handleFileChange($event)" />

<label for="inputFile" class="btn-file-input" >사진첨부<v-icon size="16">mdi-plus</v-icon></label >

</div>

<div >

<template v-for="(img, i) in imgList" :key="i">

<v-chip v-if="img" closable @click:close="removeImg(i)">

<template #append>

<v-avatar :image="img.url" ></v-avatar>

</template>

</v-chip>

</template>

</div>

</div>

const imglist = ref(['1.png','2.png','3.png','4.png','5.png','6.png','7.png'])

const removeImg = (index) => {

imgList.value.splice(index, 1);

};

지금 코드를 보면 closable 으로 인해 화면에서 삭제가 되고 removeImg 로인해 또 삭제 되는데 이거 해결방법좀...

답변 1

답변을 작성해보세요.

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2024.02.03

안녕하세요, 인프런 AI 인턴입니다.
전윤기님, v-chip 컴포넌트의 @click:close 이벤트가 제대로 동작하지 않아 문제를 겪고 계시는군요.
Vuetify의 v-chip에서 @click:close 이벤트는 칩을 닫을(click) 때 발생하는 이벤트입니다. 이 이벤트에 바인딩된 removeImg 메소드는 해당 이미지를 imgList 배열에서 제거하는 로직을 수행합니다.

문제 해결을 위해선 먼저 closable 속성이 화면상에서 칩을 닫는 기능을 함께 수행하고 있는지 확인해야 합니다. Vuetify에서 closable을 설정하는 것만으로는 화면상의 요소를 삭제하지 않으며, 오로지 칩에 닫기(closable) 아이콘을 표시하는 용도로 사용됩니다. 실제 데이터에서 요소를 삭제하려면, @click:close 이벤트에 연결된 메소드를 통해 배열에서 해당 요소를 제거할 필요가 있습니다.

주어진 코드대로라면, removeImg 메소드가 이미지를 imgList에서 제거할 때 이미지의 인덱스를 기준으로 작동하므로, 정상적으로 이미지가 삭제되어야 합니다. 만약 closable 속성 자체가 문제라면, 해당 속성을 제거하거나 다른 방법으로 구현해야 할 수도 있습니다.

<v-chip>의 closable 속성을 유지하면서 @click:close 이벤트가 호출되지 않는 문제라면, Vuetify의 버전 혹은 사용 중인 Vue의 버전이 올바른지 확인해 보시길 권장드립니다. 때로는 버전 호환성 문제로 인해 이벤트가 정상적으로 동작하지 않을 수 있습니다.

추가적인 문제 해결을 위해서는 Vuetify의 공식 문서나 더 구체적인 에러 로그를 참고할 필요가 있습니다.
- Vuetify 공식 문서: Vuetify Chip Component

단순히 UI에서만 삭제되고 싶다면, 이벤트 전파를 막는 방식으로 문제를 해결할 수도 있습니다. 예시로, 이벤트 핸들러 내에서 event.stopPropagation() 메서드를 호출하여 추가적인 이벤트 처리가 일어나지 않도록 방지할 수 있습니다.

이 문제의 정확한 해결을 위해서는 코드 상의 다른 부분들도 고려될 필요가 있고, 사용중인 Vuetify 버전에 따라 다른 해결 방법이 필요할 수도 있습니다.

도움이 필요하시면, 인프런의 커뮤니티를 활용하시거나 관련 강의의 질문 섹션을 이용해보실 것을 권장드립니다.

이 글과 비슷한 Q&A