inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

Teleport 컴포넌트 : Modal 만들기

모달 닫기 버튼 에러

3098

sung83

작성한 질문수 2

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>

 

 

vuejs

답변 1

2

짐코딩

안녕하세요 :)

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

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

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

0

sung83

네 오류해결 되었습니다. 

감사합니다.

composable: alert 창이 안떠요

0

707

2

Nuxtjs3 강의 계획은 없으신가요?

0

527

1

axios 컴포저블 함수 구현 2에서

0

470

1

composable과 pinia store - 둘 중 하나를 선택하는 기준

1

1594

1

코드 수정 문의

0

440

1

강의교안 수정 요청드립니다.

0

591

1

Pinia 사용 시 composition api

0

1388

1

createPost()의 async, awiat

0

525

1

slot 사용 관련 문의

1

413

1

Filter 구현하기에서 input v-model 질문 있습니다.

0

548

2

라우터 해시 모드 추가 질문

0

540

1

네비게이션 가드 및 플러그인 관련 질문입니다.

0

367

1

트랜지션(transition) 관련 질문드립니다.

0

548

1

json-server에 대해 궁금한게 있습니다~

0

379

1

Vue3 에서 router-link 에 이벤트 추가 방법

0

1191

1

기본편에도 crud 하는게 있을까요?

0

399

1

jsconfig.js 에러

0

384

1

headers 값을 못찾아요~

0

379

1

vite vue3에서 ie safari babel

0

771

1

composables 전역등록

0

297

1

stores 다른 파일에서 state 가져오기

0

439

1

computed에서 인자 전달방법

0

572

1

components.d.ts 자동작성 안됨

0

716

1

cors 에러

0

569

1