Modal.vue
<template>
<div class="black-bg" v-if="page ==true">
<div class="white-bg">
<h4>{{oneroom[click].title}}</h4>
<p>{{oneroom[click].content}}</p>
<p>{{oneroom[click].price}}원</p>
<button @click="$emit('closeModal')">닫기</button>
</div>
</div>
</template>
<script>
//대문자사용 props는 수정하면 안된다(재할당 x) 가져와서 page=false 이런식으로 수정하면 안됨!
export default {
name: 'ThisModal',
props : {
oneroom : Array,
click : Number,
page : Boolean,
}
}
</script>
App.vue
<Modal @closeModal="page=false" :oneroom="oneroom" :click="click" :page="page"></Modal>
모달창에서 oneroom의 index 값이 0으로 고정됩니다..
강의에서 봤을 때 click(누른 값)이 index 값에 따라 바뀌는데
Card에서는 click값이 $event를 통해 받아오는 것이 이해가 가지만
App.vue에 있는 click 초기값이 0인데 Modal.vue에서 click값이 어떻게 변동이 되는지 잘 모르겠습니다..ㅠㅠ