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

sung83님의 프로필 이미지
sung83

작성한 질문수

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

Teleport 컴포넌트 : Modal 만들기

모달 닫기 버튼 에러

작성

·

2.9K

0

모달 띄우는 부분은 잘되는데 닫는부분에서 에러가 나는데요 

이유를 모르겠습니다.

콘솔창에서는 

runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of native event handler 
  at <BaseTransition appear=false persisted=false mode=undefined  ... > 
  at <Transition createAt=undefined > 
  at <AppModal modelValue=true onUpdate:modelValue=fn title="게시글"  ... > 
  at <PostModal modelValue=true onUpdate:modelValue=fn title="안녕하세요11"  ... > 
  at <PostListView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {__v_skip: true} > > 
  at <RouterView> 
  at <TheView> 
  at <App>
warn @ runtime-core.esm-bundler.js:38
logError @ runtime-core.esm-bundler.js:212
handleError @ runtime-core.esm-bundler.js:204
callWithErrorHandling @ runtime-core.esm-bundler.js:158
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:164
invoker @ runtime-dom.esm-bundler.js:369
runtime-core.esm-bundler.js:218 Uncaught TypeError: str.charAt is not a function
    at shared.esm-bundler.js:552:53
    at shared.esm-bundler.js:534:37
    at shared.esm-bundler.js:556:62
    at shared.esm-bundler.js:534:37
    at emit$1 (runtime-core.esm-bundler.js:668:40)
    at runtime-core.esm-bundler.js:7348:53
    at ComputedRefImpl.set [as _setter] (PostModal.vue:42:3)
    at set value [as value] (reactivity.esm-bundler.js:1149:14)
    at closeModal (PostModal.vue:48:13)
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)

postmodal.vue

<script setup>
import AppModal from '@/components/AppModal.vue';
import { computed } from 'vue';

const props = defineProps({
modelValue: Boolean,
title: String,
content: String,
createdAt: [String, Number],
});
const emit = defineEmits(['update:modelValue']);
const show = computed({
get() {
console.log('get.show.value:', show.value);
return props.modelValue;
},
set(value) {
emit(['update:modelValue', value]);
console.log('set.show.value:', show.value);
},
});
const closeModal = () => {
console.log(show.value);
show.value = false;
};
</script>
 
appmodal.vue
<script setup>
defineProps({
modelValue: Boolean,
title: String,
});
defineEmits(['close', 'update:modelValue']);
</script>

 

 

답변 1

2

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

안녕하세요 :)

현재 : emit(['update:modelValue', value]);

제안 : emit('update:modelValue', value);

이렇게 배열을 빼보시겠어요? 🙂

sung83님의 프로필 이미지
sung83
질문자

네 오류해결 되었습니다. 

감사합니다.

sung83님의 프로필 이미지
sung83

작성한 질문수

질문하기