click이 커스텀 이벤트라 emits로 선언 해야한답니다
205
작성한 질문수 3
강의대로 따라서 코딩하였고
이런 에러가 뜨길래 구글링 하였지만,
emits를 선언 하라는 자료는 있긴 했습니다
하지만 click 이벤트 선언이 안되어서 문제가 되는 경우는 안보이더라구요
// PostListView.vue
<PostItem
:title="item.title"
:content="item.content"
:created-at="item.createdAt"
@click="goPage(item.id)"
@modal="openModal(item)"
></PostItem>저기 문제되고 있는 @click 이벤트를
// PostItem.vue
defineEmits(['modal', 'click'])이렇게 선언 하니까 경고가 사라지긴 했습니다
혹시 강의에 이 에러에 대한 내용이 있었나요?
제가 놓친 것이 있나 싶어 글 올립니다
추가)
오늘 확인해보니 그냥 클릭 자체가 안되네요
emits에서 'click' 을 지워도, 남겨도 post 카드 하나를 클릭 했을 때 상세 페이지로 넘어가지 않네요
답변 1
0
안녕하세요.
우선 해당 경고(Warning)는 강의시에 발생 하지 않았어요. 만약 현재 에러가 발생한다면 Vue 버전이 강의시 버전과 동일하지 않을 가능성이 있습니다. 한번 확인해 보시겠어요? https://github.com/gymcoding/vue3-posts/tree/15_modal_teleport (강의시)
그리고 제 의견으로 Emit으로 사용하신다면 명시적으로 선언해 주는 것이 좋을 것 같아요. 만약 Non-props로 의도해서 사용한다면 명시적으로 선언하지 않아도 될 거예용.
추가 질문 남기신 것은 콘솔에러 에러가 발생했을 것 같은데요. 해당 에러를 파악해 보시면 좋을 것 같아요. 만약 발생하지 않는다면 강의 소스와 동일하지 않을 것 같습니다. 강의소스와 동일한데 작동이 안된다면 깃헙 소스를 공유해주시면 제가 한 번 확인해 볼게요.
0
답변 감사합니다.
구글링으로 해결 했습니다.
부트스트랩 아이콘을 강의와는 다르게 했었습니다,
<template>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
/>
<AppCard>
<h5 class="card-title">{{ title }}</h5>
<p class="card-text">
{{ content }}
</p>
<p class="text-muted">{{ createdAt }}</p>
<template #footer>
<div class="d-flex flex-row-reverse">
<button class="btn p-0" @click.stop="$emit('modal')">
<i class="bi bi-arrow-up-left-square"></i>
</button>
</div>
</template>
</AppCard>
</template><i> 태그가 동작을 안 해서 <link>를 구글링 해서 찾아 넣었었는데,
이것이 문제가 되더라구요..
후에 코드를 다시 검사해보니
AppCard 와 같은 루트에 link가 있길래 이게 문제인건가 싶어
<template>
<AppCard>
<h5 class="card-title">{{ title }}</h5>
<p class="card-text">
{{ content }}
</p>
<p class="text-muted">{{ createdAt }}</p>
<template #footer>
<div class="d-flex flex-row-reverse">
<button class="btn p-0" @click.stop="$emit('modal')">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-up-left-square"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm10.096 8.803a.5.5 0 1 0 .707-.707L6.707 6h2.768a.5.5 0 1 0 0-1H5.5a.5.5 0 0 0-.5.5v3.975a.5.5 0 0 0 1 0V6.707z"
/>
</svg>
</button>
</div>
</template>
</AppCard>
</template>이렇게 svg html로 처리하였더니
루트 태그가 <AppCard> 하나로 바뀌면서 해결되었습니다,
<i> 태그가 작동이 안되었던 것은 조금 더 찾아봐야겠네요
질문드립니다.
0
32
0
unplugin-vue-components 질문드립니다.
0
37
2
강의듣다가 헷갈려서 질문드립니다.
0
31
1
와 짐코딩님 강의 들으면서 느끼는게 많네요.
0
32
1
질문드립니다.
0
32
2
라우터 인스톨 후 실행안됨
1
49
2
코드 자동 포매팅 질문
0
68
2
필터 watchEffect 질문입니다.
0
51
1
json-server 오류가 다른게 뜨네요
0
113
1
미리보기가 안됩니당...
0
69
2
unplugin-vue-components
0
81
2
TypeError 질문
0
52
1
v-model="show" :show="show" 같이 사용?
1
57
1
hash 모드 배포의 필요성?
0
61
2
.eslintrc.cjs 가 없습니다
0
95
2
title,content값이 비어서 저장되는데 제가 혹시 어떤 부분을 잘못 작성했는지 ㅜㅜ 알고싶습니다.
0
98
3
_title_like: "", 문의드려요 해당 값을 설정하면 list가 아에 안나옵니다.
0
64
1
@click.prevent="params._page = pageNum"> 에 .value를 안쓰는 이유가 궁금합니다.
0
71
2
중첩된 컴포넌트 문제
0
75
2
교안에 있는 부분이 아닌가요?
0
109
2
useAxios Proxy(Object) RefImpl
0
113
1
axios timeout
0
328
3
강의와 상관은 없지만, 궁금한 점이 있어 질문드립니다.
0
122
2
컴포넌트 분리 부분에서 오류가 나요ㅠㅠ
0
167
2