[Vue.js] 모달창 내에 상세 페이지 만들기

💡 실습 포인트!

• 이번에는 클릭한 상품의 상세 페이지를 모달창 내에 보여줄 수 있도록 만들어보았다.
• 진짜 부동산 어플처럼 상품마다 여러개의 사진을 썸네일로 보여주고 클릭하면 크게 볼 수 있도록 구현해보면 더 재미있었을 것 같다. 이건 별로 어렵지 않게 가능할 듯!

---

💜 모달창 내에 상세 페이지 만들기

🤍 하드코딩으로 모달창 내에 첫 번째 상품의 상세 페이지 만들기

• 데이터바인딩을 어떻게 해야할지 감을 잡기 어렵다면 먼저 하나만 데이터바인딩을 해보면서 어떤 부분을 수정하면 다른 데이터도 똑같이 적용을 할 수 있을지 감을 잡는 것이 중요하다.

{
    id : 0,
    title: "Sinrim station 30 meters away",
    image: "https://codingapple1.github.io/vue/room0.jpg",
    content: "18년 신축공사한 남향 원룸 ☀️, 공기청정기 제공",
    price: 340000
}

 

<div class="black-bg" v-if="openModal == true" @click="close($event)" >
    <div class="white-bg">
        <img :src="rooms[0].image" class="detail-room-image">
        <h4>{{ rooms[0].title }}</h4>
        <p>{{ rooms[0].content }}</p>
        <p>{{ rooms[0].price }}원</p>
        <button class="close">닫기</button>
    </div>
</div>

• 모달창 내 첫번째 상품의 상세 페이지 내용으로 들어갈 수 있는 데이터들은 위와 같다.
• 나는 id 를 제외하고 title, image, content, price 모두 상세 페이지에 담아주었다.

---

🤍 모달창 내에 클릭한 상품의 상세 페이지 만들기

• 이제 위의 html 코드에서 0 이라고 작성한 부분만 클릭한 상품의 인덱스 혹은 클릭한 상품의 id 로 수정해주면 된다.
• 예를 들어, 0번 인덱스의 상품을 클릭하면 0번 상품의 상세 페이지, 1번 인덱스의 상품을 클릭하면 1번 상품의 상세 페이지.. 이런 식으로 말이다.
• React 에서는 state 를 사용하면 되었지만, Vue 의 경우에는 data 보관함에 클릭한 상품의 인덱스 혹은 클릭한 상품의 id 를 보관해두었다가 다른 상품을 클릭할 때마다 그에 맞게 변경되도록 해주면 된다.

 

data(){
    return {
        clickedRoom : 0,
    }
}

• 그래서 위와 같이 data 보관함에 clickedRoom 이라는 이름으로 클릭한 상품의 인덱스 혹은 id 를 보관해줄 수 있도록 해주고, 초기값은 0으로 설정해주었다.

 

<div class="card" v-for="(room, i) in rooms" :key="i">
    <img :src="room.image" class="room-image">
    <h4  class="room-name" @click="openModal = true; clickedRoom = i">{{ room.title }}</h4>
    <p>{{ room.price }}원</p>
    <span>신고 수: {{ report[room.id] }}</span> <button class="report" @click="increase(room.id)">허위매물신고</button>
</div>

• 그리고 상품의 상세 페이지는 상품명을 클릭해야 열리기 때문에 room-name 이라는 class 를 가진 h4 태그의 @click 속성에 clickedRoom = i 라고 코드를 작성해주었다.
• card 라는 class 를 가진 div 태그는 v-for 문법에 의해 반복되면서 rooms 데이터가 바인딩되어 레이아웃이 생성되는데, 이 때 각 요소를 구별할 수 있게 부여된 i 를 활용한 것이다.

---

💜 v-if / v-else 문법 알아보기

<div v-if="1 == 2">
  안녕하세요
</div>
<div v-else-if="1 == 3">
  안녕하세요2
</div>
<div v-else>
  안녕하세요3
</div>

• JavaScript 를 공부하면 if 문, if-else 문 등과 같이 if 문에 대해 공부하게 된다.
• Vue 에서도 이와 동일하게 사용할 수 있는 v-if 문, v-else 문 등이 존재한다.
• 이전에 배운 v-if="조건식" 이라는 문법은 조건식이 참일 경우에만 해당 문법이 들어있는 html 태그를 보여줄 수 있었다.
• 근데 v-else 라는 문법도 존재하는데, 이는 v-if 문에 적은 조건식이 참이 아닌 경우에 v-else 문이 들어있는 html 태그를 보여준다.
• 물론, 조건문이 3개 이상이 필요한 경우에 사용할 수 있는 v-else-if 문도 존재하기 때문에 필요에 따라 사용하면 된다.