다른 파일에 있는 데이터를 가져올 때 사용하는 import / export
먼저 상품 정보가 담긴 데이터 파일을 만들어주자.
oneroom.js
export default
[{
id : 0,
title: "Sinrim station 30 meters away",
content: "18년 신축공사한 남향 원룸 ☀️, 공기청정기 제공",
price: 340000
},
{
id : 1,
title: "Changdong Aurora Bedroom(Queen-size)",
content: "침실만 따로 있는 공용 셰어하우스입니다. 최대 2인 가능",
price: 450000
},
{
id : 2,
title: "Geumsan Apartment Flat",
content: "금산오거리 역세권 아파트입니다. 애완동물 불가능 ?",
price: 780000
},
{
id : 3,
title: "Double styled beds Studio Apt",
content: "무암동인근 2인용 원룸입니다. 전세 전환가능",
price: 550000
},
{
id : 4,
title: "MyeongIl Apartment flat",
content: "탄천동 아파트 월세, 남향, 역 5분거리, 허위매물아님",
price: 680000
},
{
id : 5,
title: "Banziha One Room",
content: "반지하 원룸입니다. 비올 때 물가끔 새는거 빼면 좋아요",
price: 370000
}];
--> export default 를 사용한다. (데이터를 내보낼 때 사용)
그리고 다시 App.vue로 돌아와서
import data from './oneroom.js';
--> import 문법을 사용하여 데이터를 가져온다. 여기서 data는 내가 작명한 변수 이름이다.
(src 밑에 데이터 파일을 만들어서 상대 경로 ./oneroom.js를 사용함)
그리고 가져온 데이터를 사용하기 위해
data() {
return {
원룸들 : data,
modalOpen : false,
신고수 : [0,0,0],
메뉴들 : ['Home', 'Shop', 'About'],
products : ['역삼동원룸', '천호동원룸', '마포구원룸']
}
},
--> 원룸들이란 이름으로 데이터를 넣는다.
HTML로 돌아가서
<div v-for="product in 원룸들" :key="product">
<img :src="product.image" class="room-img">
<h4 @click="modalOpen = true">{{ product.title }}</h4>
<p>{{ product.price }}원</p>
</div>
--> 저번 시간에 배운 v-for 문법을 사용하여 반복문으로 설정하고, product라는 (내가 설정한) 이름으로 가져온다.
가져온 data가 object 이므로 상세 데이터를 가져올 때 <오브젝트이름.데이터이름> 으로 가져오면 끝!
출처 : 코딩애플
'Language > Vue.js' 카테고리의 다른 글
| [Vue] Component (0) | 2024.05.05 |
|---|---|
| [Vue] 모달창 안에 상세페이지 만들기 (0) | 2024.05.04 |
| [Vue] v-if와 모달창 만들기 (1) | 2024.05.01 |
| Vue 이벤트 핸들러 (0) | 2024.04.29 |
| Vue 반복문 v-for (0) | 2024.04.29 |