강의에서 $emit으로 모달창 띄우기 질문있습니다.

[김진우]

선생님이랑 아무리 똑같이 코드를 작성해도 제목 클릭시 모달창이 뜨지 않는데 왜그런건가요...

App.vue

<template>

<div v-if="1 == 2">
 안녕하세요
</div>
<div v-else-if="1 == 3">
<!-- if문 연달아 여러개 쓰고 싶을때 사용(자바스크립트 if문과 같음) -->
 안녕하세요2
</div>
<div v-for="(a,i) in 원룸들" :key="i">

<h4 @click="모달창열렸니 = true; 누른거 = i">{{ a.title }}</h4>
<p>{{ a.price }}원</p>
</div>
<Modal :원룸들="원룸들" :누른거="누른거" :모달창열렸니="모달창열렸니"/>

<div class="menu">
<!-- v-for="작명 in 횟수" :key="작명" key안에 작명은 v-for작명과 이름 동일하게 -->
{{ a }}
</div>

<Discount v-bind="오브젝트" :이름="오브젝트.name" :나이="오브젝트.age"/>

<Card @openModal="모달창열렸니 = true" :원룸="원룸들[i]" v-for="(작명,i) in 원룸들" :key="작명"/>
<!-- <Card :원룸="원룸들[1]"/>
 <Card :원룸="원룸들[2]"/>
 <Card :원룸="원룸들[3]"/>
 <Card :원룸="원룸들[4]"/>
 <Card :원룸="원룸들[5]"/> -->

</template>

<script>

import data from './assets/oneroom.js';
import Discount from './Discount.vue';
import Modal from './Modal.vue';
import Card from './Card.vue';

export default {
name: 'App',
// 데이터보관함 아래처럼 data, return 으로 생성
data(){
return{
오브젝트 : { name : 'kim', age : 20 },
누른거 : 0,
원룸들 : data,
모달창열렸니 : false,
신고수 : [0,0,0],
메뉴들 : ['Home', 'Shop', 'About'],
products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
}
},
methods : {
increase(){
this.신고수 += 1;

},
},
components: {
Discount : Discount,
Modal : Modal,
Card : Card,
}
}
</script>

<style>
body {
margin: 0;
}
div {
box-sizing: border-box;
}
.discount {
background: #eee;
padding: 10px;
margin: 10px;
border-radius: 5px;
}
.black-bg {
width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
position: fixed; padding: 20px;
}
.white-bg {
width: 100%; background: white;
border-radius: 8px;
padding: 20px;
}
.room-img {
width: 100%;
margin-top: 40px;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}

.menu{
background: darkslateblue;
padding: 15px;
border-radius: 5px;
}
.menu a {
color: white;
padding: 10px;
}
</style>

--- ---------------------

Card.vue

<template>
<div>

<h4 @click="$emit('openModal')">{{원룸.title}}</h4>
<p>{{원룸.price}}원</p>
</div>
</template>

<script>
export default {
props : {
원룸 : Object,
}
}
</script>

<style>

</style>



해결부탁드립니다 너무 답답하네요 ㅜㅜ

[codingapple]

@openModal 말고 @open-modal 로 써보거나 openModal이벤트 발생하는거맞는지 콘솔창에 출력같은거 해봅시다

[김진우]

@open-modal 로 바꿨는데도 안되고, 제목을 눌러도 콘솔창에 아무거도 뜨지 않습니다.. 혹시 코드파일같은거 제공이 안되는걸까요?

[김진우]

Card.vue

<template>
<div>

 
<h4 @click="$emit('openModal')">{{원룸.title}}</h4>
<p>{{원룸.price}}원</p>
</div>
</template>

여기서 title, price , image에 
원룸 대신 a를 집어넣게 될 경우 .
콘솔창에 오류도 뜨고, 타이틀을 누르게 되었을때 어떤 오류창이 뜹니다.
 

[글쓴이]

글