모달창 내부 완성하기, v-else, v-else-if

• X번째 상품을 누르면 X번째 상품을 소개하는 모달창
• 모달창을 X개 만드는 게 아닌 모달창UI 1개에 글만 변경해서 보여줌

몇번째 상품을 눌렀는지 기록

data(clickWhat) 만들기

<script>
export default {
  name: 'App',
  data(){// 데이터 보관통
    return {
      clickWhat: 0, //기록(초기값은 0)
      products: ['상품1', '상품2'],
      modalOpen: false,
    }
  }
}
</script>

clickWhat 값 변경

모달 열기 버튼을 클릭했을 때: 변수 clickWhat을 상품의 idx로 변경

<template>
  <div v-for="(item, idx) in products" :key="idx">
    <h4>
      {{ item.title }}
    </h4>
	<button type="button" v-on:click="modalOpen = true; clickWhat = idx"><!-- idx 할당 -->
      모달 열기
    </button>
    <hr>
  </div>
</template>

모달 내용 변경

products[clickWhat].항목으로 데이터 불러오기

<!-- 모달 -->
<template>
  <div v-if="modalOpen">
      <h4>{{ products[clickWhat].title }}</h4>
	  <p>모달이에여</p>
      <button type="button" v-on:click="modalOpen = false">닫기</button>
    </div>
</template>

v-else, v-else-if

<div v-if="1 == 2">
  첫번째
</div>
<div v-else-if="1 == 3">
  두번째
</div>
<div v-else>
  세번째
</div>
//결론: 세번째만 나옴