[Vue/코딩애플/part1] 6. 모달창에 상세 페이지 만들기 / v-if, v-else, v-else-if 문

📌상품명을 클릭 > 모달창 노출 > 모달창 안에 상세 내용 노출되도록 만들기

N 번째 상품의 상품명을 누르면 그 상품의 내용이 모달창에 노출되도록 해보자.

 

 <h4 @click="isModal = true; prodId = i;">{{a.title}}</h4>

<div v-for="(a,i) in prodList" :key="i">
    <img :src="`${a.image}`" alt="room_img" class="room-img">
    <h4 @click="isModal = true; prodId = i;">{{a.title}}</h4>
    <p>{{a.price}}원</p>
    <button @click="increase(i)">허위매물신고</button><br>
    <span>신고수 : {{count[i]}}</span>
 </div>

 

a.title 이 상품명 영역이다.

상품명을 눌렀을 때 해당 상품이 몇번째 index 인지는 i 에 저장되어있다.

그 i 를 알아야하니 prodId 라는 변수를 만들어 i를 저장한다.

(데이터보관함에 prodId 라는 변수를 만들고 초기화해야 한다.)

data() {
    return {
      menu : ['Home', 'Shop', 'About'],
      count : [0,0,0,0,0,0],
      isModal : false,
      prodList, // 부동산 데이터들
      prodId : 0, // 상품 id
    }
  }

 

 

그러면 prodList[i].title 와 같이 array 형태로 저장된 상품리스트에서 해당 상품에 대한 내용을 뽑아낼 수 있다.

<!-- 모달창 영역 -->
  <div class="black-bg" v-if="isModal === true">
    <div class="white-bg">
      <h4>{{prodList[prodId].title}}</h4>
      <p>{{prodList[prodId].content}}</p>
      <button @click="isModal=false">닫기</button>
    </div>
  </div>
  <!-- // 모달창 영역 끝 -->

 

 

---

📌 v-if, v-else, v-else-if 문

v-if 조건식이 참이 아닐 땐 v-else 영역을 노출시킨다.

아래는 else 문이 출력된다.

 

 

v-else-if 문은 다음과 같이 활용화면 된다.

 

그러면 else-if 문이 출력된다.