인프런 커뮤니티 질문&답변

소연님의 프로필 이미지
소연

작성한 질문수

Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"

axios 컴포저블 함수 구현 1

글 삭제 컨펌 팝업에서 취소를 눌렀을 때

작성

·

192

0

postDetail에서 삭제버튼을 누른 후

뜬 삭제 하시겠습니까? 팝업 창에서 취소를 눌러도

로딩 스핀이 생겨요. 왜 그럴까요??

<html>

<div class="col-auto">
				<button
					class="btn btn-danger"
					@click="remove"
					:disabled="removeLoading"
				>
					<template v-if="removeLoading">
						<span
							class="spinner-grow spinner-grow-sm"
							aria-hidden="true"
						></span>
						<span class="visually-hidden" role="status">Loading...</span>
					</template>
					<template v-else>삭제</template>
				</button>
			</div>

<setup>

const removeError = ref(null);
const removeLoading = ref(false);
const remove = async () => {
	try {
		if (confirm('삭제 하시겠습니까?') === false) {
			return;
		}
		removeLoading.value = true;
		await deletePost(props.id);
		vSuccess('삭제가 완료되었습니다.');
		router.push({ name: 'postList' });
	} catch (err) {
		removeError.value = err;
		vAlert(err.message);
	} finally {
		removeLoading.value = true;
	}
};

취소를 하면 저절로 false가 돼서

removeLoading.value = true로 안넘어가야하는 것 아닌가요?

제가 빼먹은 부분이 어디일까요 ㅠㅠ

답변 1

0

짐코딩님의 프로필 이미지
짐코딩
지식공유자

안녕하세요 🙂

이러한 경우는 디버깅을 해봐야 할 것 같아요.

debugger; 로 breakpoint 를 사용해서 디버깅 또는 console.log로 디버깅을 해보시면 금방 찾을 수 있을거에요.

소연님의 프로필 이미지
소연

작성한 질문수

질문하기