[Vue.js] 순수 Vue로만 페이지네이션 구현하기
스터디에서 Vue.js로 웹페이지를 만드는 프로젝트를 하고 있는데, 사정상 아직 Vuex를 쓰지 못하는 상태에서, 백엔드 개발도 전혀 이뤄지지 않은 상황에서 화면상으로만 페이지네이션을 구현해야 했다. 페이지에 표시되는 데이터를 넘겨주는 부모 컴포넌트 index.vue가 있고, 페이지를 표시하는 하위 컴포넌트인 pagination.vue가 있다. index.vue 거래내역이 없습니다. 컴포넌트는 위 완성샷 사진에서도 살짝 보이는, 거래내역을 보여주는 컴포넌트다. 보다시피 부모 컴포넌트인 index.vue에서 "orderListData"의 이름으로 데이터를 전달하고, v-for로 화면에 뿌려준다. 컴포넌트가 페이지를 표시하기 위한 컴포넌트. 페이지를 클릭하면 이전 페이지, 다음 페이지로 넘어갈 수 있게도 만..
개발 공부 일지/Vue.js | 2020. 9. 14. 16:19
[Vue.js] img 태그 이미지 주소 데이터 바인딩
export orderInfo = [ { paymentIdx: "O16086544", goodsName: "1번 상품명", goodsIdx: 1234567, goodsimg: "https://cdn.pixabay.com/photo/2015/02/02/11/08/office-620817_960_720.jpg", ...(생략) } ] 이런 형태의 배열 데이터가 있다. 여기의 goodsimg에 문자열 형태로 있는 이미지 주소를 태그의 src 부분에 넣어주려고 한다. ...(생략) {{ orderInfo.paymentIdx }} ...(생략) 이 때 img 태그의 src 부분이 데이터 바인딩이 되는 부분이므로, 위의
개발 공부 일지/Vue.js | 2020. 9. 14. 14:56