모달창 상세페이지

for문을 이용해서 데이터의 수에 따라 펼쳐진 상품들을 누르면 해당 내용에 관해 뜨는 모달창을 만들어보자.

내가 누른 것의 순서를 알 수 있는 데이터가 있어야하니,

data() {//데이터 보관함
    return {
      누른거 : 0,
      원룸들 : data,
      모달창열렸니 : false,
      신고수 : [0,0,0],
      메뉴들 : ['Home','Shop', 'About'],
      products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
      prices : [50, 60, 70]
    }
  },

누른거 : 0이라는 데이터를 만들고,

제목을 누르면 누른거를 해당 제목으로 변경해주면 된다. 그래서

<h4 @click="모달창열렸니 = true; 누른거=i">{{원룸들[i].title}}</h4>

이렇게, 누른거=i 라고 적어 해당 번호로 바뀌게 해준다. 그리고

<div class="black-bg" v-if="모달창열렸니 == true">
    <div class="white-bg">
      <h4>{{원룸들[누른거].title}}</h4>
      <p>{{원룸들[누른거].content}}</p>
      <button class="btn" @click="모달창열렸니=false">닫기</button>
    </div>
  </div>

이렇게 적으면, 누른거 라는 변수에 따라서 모달창의 title과 content가 바뀌게 된다.