코딩애플 Vue3 직방, 인스타그램 웹앱 -- 6 (import / export)
# 데이터 export 보내주기.....
파일이 있다고 그냥 읽어 올수 없다. 동의가 있어야한다.
동의 서명 코드는 데이터 변수로 선언해서
export default가 기본 값이다.
혹시나 배열 일경우
1개면 default고 2개면 export { }..... 묶어서 보내주기
#데이터 import 받아오기....import는 import '변수명' from '경로' 로 선언하면된다....
받아올때도 배열이면 변수명 자리에 { } 묶어서 받기...
오브젝 배열의 리스트의 자료를 받아온다. [ {}, {}, {}, {}, {} ] 형태의 자료이고 변수를 선언하지 않을때는
export default [ {}, {}, {}, {}, {} ] 파일안에 선언하면 된다.
나는 스크립트안에다가
선언하고
적용했다.
그걸 다시 v-for문을 이용해서 돌리는것이다.
지난시간에 for문에서는 프로젝트 경로의 img를 동적생성해주는 것이였다. require() 할수를 이용해서....
그런데 이번 for문에는 먹히지 않았다.
<div>
<div v-for="(원룸,i) in 원룸들" :key="i" :style="inStyle">
<img :src="원룸.image" class="img_room">
<h4 :style="style" @click="모달창열렸니 =true">{{ i+1}}. {{ 원룸.title }}</h4>
<p > {{원룸.price}}</p>
</div>
</div>이번껀 그냥 데이터를 넣어야지 되었다. :src안에 문자열로 넣을때는 {{ }} 안에 기재하지 않았다는게 포인트...
그리고 적용되는데 시간이 소요되었다. 에러는 안나왔는데 화면이 아무것도 안뜨길래 에러인줄알았더니 반영이 안되서였다.
한번 데이터가 읽히고 나니깐 그땐 계속 잘됨...
require('${{원룸.image}}') 경우에는 에러가 나옴....ㅋㅋㅋ 이렇게 하시는 분들은 없을 수도 있으나...화면 출력이 안되었을때 뻘짓을 많이 했다.
그럼 모달창에 상세내용을 출력하고 싶어졌다...
chatGPT의 힘을 빌려...code수정했다.
#for문 안에 데이터 함수로 전달 하기
여기 부분이겠지...직적 데이터가 아니라 함수를 적용하는 것이다.
여기 저기 손을 봐야했다..ㅋㅋ
//모달창 부분에서 상세데이터를 받은 코드를 추가하고 클릭기능에 함수로 변경한다.
<p>{{ modalContent }}</p>
<button @click="closeModal()" >닫기</button>
//클릭시 모달창 활성화 함수도 수정한다.
<h4 :style="style" @click="modalOpen(원룸.content)">{{ i+1}}. {{ 원룸.title }}</h4>
script의 methods 영역에 함수를 추가한다.
데이터 함수로 전달시 원룸자체를 보내서
로 작성해도 된다..모달창에 띄울 내용이 많다면 이것도 방법~