Vue 모달창에 id에 맞춰 내용 넣기

모달창을 클릭하면 id에 맞춰 내용이 데이터 바인딩 될 수 있도록 작업해 보겠다.

 

서버가 있으면 서버에서 데이터를 받아와서 보여주는게 일반적이지만

테스트를 위해 임시로 데이터 파일을 준비해 둔다.

// info.js, 제품영양정보 

[{
  id : 1,
  title: "아메리카노",
  info: ['나트륨', '단백질', '포화지방','당류'],
  made: "없음",
  etc: "제공되는 영양 정보는 메뉴 기본 옵션 항목을 기반으로 하며 사용자별로 선택한 옵션을 반영하지 않습니다. 
    성인과 청소년(13세 이상)은 하루 평균 2,000칼로리가 필요하고 어린이(4~12세)는 하루 평균 1,500칼로리가 필요합니다. 
    그러나 개인에 따라 다를 수 있습니다."
  },
  {
  id : 2,
  title: "라떼",
  info: ['단백질', '당류', '포화지방'],
  made: "없음",
  etc: "제공되는 영양 정보는 메뉴 기본 옵션 항목을 기반으로 하며 사용자별로 선택한 옵션을 반영하지 않습니다. 
   성인과 청소년(13세 이상)은 하루 평균 2,000칼로리가 필요하고 어린이(4~12세)는 하루 평균 1,500칼로리가 필요합니다. 
   그러나 개인에 따라 다를 수 있습니다."
}];

 

info.js 에 있는 변수를 App.vue 에 import 한다.

HTML에  id에 맞춰 내용을 바꿔질수있도록 데이터 바인딩을 해준다

//사용자가 몇번째 데이터 눌렀는지 기록하는 data

data(){
 return {
  clickNum: 0
 }
}

 

props문법으로 부모가 가진 데이터를 자식에게 보내줄수 있음.

// App.vue

<template>
 <div>
  <Modal :productInfo="productInfo" :modalOpen="modalOpen" :clickNum="clickNum" @click="modalOpen = true" clickNum="i"/>
 </div>
</template>

<script>
import info from './info.js' //파일경로
import Modal from './Modal.vue'

data() {
 return {
  productInfo: data,
  modalOpen: false,
  clickNum: 0
 },
 component: {
  Modal
 }
}
</script>

 

모달창 제목 클릭하면 id에 맞춰 내용 보여주기

//modal.vue

<template>
 <div class="start" v-if="modalOpen == true" :class="{end : modalOpen}">
  <div class="wrapper">
    <div class="item">
    <div>
        <h4>{{ Info[clickNum].title }}</h4>
        <h6>영양 정보/원산지 정보</h6>
        <h6>제품 영양 정보(업데이트 예정)</h6>
        <ol>
            <li>1회 제공량</li>
            <li v-for="(content, i) in procuctInfo" :key="i">{{Info[clickNum].content}}</li>
        </ol>
        <p>{{Info[clickNum].etc}}</p>
        <h6>원산지 정보</h6>
        <p>{{Info[clickNum].made}}</p>
        <button @click="$emit('closeModal')" class="btn">닫기</button>
    </div>
    </div>
</div>
    </div>
</template>

<script>
 export default{
  name: 'Modal',
  props: {
   productInfo: Array, //받아온 데이터 자료형 이름
     productInfo: data,
     modalOpen: Boolean,
     clickNum: Number
  }
 }
</script>