[Vue] 모달창 안에 상세페이지 만들기

현재 상태는 제목을 누르면 모달창이 켜지고, 모달창 안 상세페이지가 모두 같은 상황

여기에 상세 페이지를 다르게 적용해보자.

  data() {

    return {

      누름 : 0,

      원룸들 : data,

      modalOpen : false,

      신고수 : [0,0,0],

      메뉴들 : ['Home', 'Shop', 'About'],

      products : ['역삼동원룸', '천호동원룸', '마포구원룸']

    }

  },

--> 먼저 '누름' 데이터 생성한다. (각 항목에 해당하는 상세 페이지가 떠야해서 데이터부터 생성함)
--> 원룸들 : data < 여기에 이미 상세페이지 안에 들어갈 데이터는 모두 있다. (지난 포스팅 참고)

 

그리고 위로 올라가서

  <div v-for="(product,i) in 원룸들" :key="i">

    <img :src="product.image" class="room-img">

    <h4 @click="modalOpen = true; 누름 = i">{{ product.title }}</h4>

    <p>{{ product.price }}원</p>

  </div>

--> 제목을 클릭했을 때 모달창이 열림과 동시에 '누름' 데이터가 정수 i로 바뀌게 설정한다.
     v-for에 의해 반복문으로 돌기 때문에 2번째 제목을 누르면 누름=2, 3번째 제목을 누르면 누름=3이 되는 것

 

마지막으로

  <div class="black-bg" v-if="modalOpen == true">

    <div class="white-bg">

        <h4>{{ 원룸들[누름].title }}</h4>

        <p>상세페이지 내용임</p>

        <button @click="modalOpen = false">닫기</button>

    </div>

  </div>

--> 모달창 제목 부분에 {{ 원룸들[누름].title }} 을 넣어주면 끝!
     클릭할 때 누름 데이터에 정수가 입력되어 ex) 원룸들[1].title 이런 식으로 데이터를 가져올 수 있게된다.

 

결과물

 

출처 : 코딩애플