자식이 부모데이터 바꾸고 싶으면 custom ... (숙제)

[Heok Joon]

<template>
 <div class="menu">
 {{ a }}
 </div>
 <Discount />
 <Modal
 @closeModal="modalClose = false"
 :원룸들="원룸들"
 :누른거="누른거"
 :modalClose="modalClose"
 />
 <Card
 @openModal="
modalClose = true;
누른거 = $event;
"
 :원룸="원룸들[i]"
 :modalClose="modalClose"
v-for="(작명, i) in 원룸들"
 :key="작명"
 />
</template>

<script>
import data from "./assets/data.js";
import Discount from "./discount.vue";
import modal from "./Modal.vue";
import Card from "./Card.vue";
export default {
name: "App",

data() {
return {
누른거: 0,
원룸들: data,
modalClose: false,
신고량: [0, 0, 0],
메뉴들: ["home", "shop", "about"],
products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
 };
 },
methods: {
increase() {},
 },
components: {
Discount: Discount,
Modal: modal,
Card: Card,
 },
};
</script>
-------------------------------------------
Modal.vue

<template>
 <div class="black-bg" v-if="modalClose == true">
 <div class="white-bg">
 <h4>{{ 원룸들[누른거].title }}</h4>
 <p>{{ 원룸들[누른거].content }}</p>
 
 <p>가격:{{ 원룸들[누른거].price }}</p>
 <button @click="$emit('closeModal')">닫기</button>
 <Discount />
 </div>
 </div>
</template>
<script>
export default {
name: "main-modal",
props: {
원룸들: Object,
누른거: Number,
modalClose: Boolean,
 },
};
</script>

<style></style>

---------------------------------
card.vue

<template>
 <div>
 
 <h4 @click="함수;">
 {{ 원룸.title }}
 </h4>
 <p>{{ 원룸.price }}원</p>
 </div>
</template>

<script>
export default {
name: "main-modal",
props: {
원룸: Object,
누른거: Number,
modalClose: Boolean,
 },
methods: {
함수() {
this.$emit("openModal", this.원룸.id);
 },
 },
};
</script>

<style></style>

아무리 해결하려해도 뭐가 원인인지 모르겠네요 
close @closeModal =값을 <Modal>에 기입하면 모달자체가 뜨지 않아요

[codingapple]

Card.vue의 <h4 @click="함수;">
함수() 아니면 함수로 바꿉시다

[글쓴이]

글