[개발일지] Vue.js Trello 만들기 - 카드상세조회(라우팅, API 연동), 카드 수정

카드 상세 조회 - 라우팅

[Board] 에 router-view 부분 추가.

[CardItem] 에 router-link 추가. (링크 연결 시 board id는 state에서 가져옴, card id는 data props에서 가져옴)

=> card 하나씩 클릭할 때 card 컴포넌트가 router-view에 출력됨

[Card] 컴포넌트에 root div를 <Modal>로 바꾸면 (모달 import,컴포넌트 등록 해야함) Card컴포넌트를 띄울 때 모달창이 뜬다.

=> 카드를 누르면 Modal창 뜸

카드 상세 조회 - API 연동

card 누르면 api 연동해서 card 정보 불러오도록 구현하기.

(api 등록) fetch 함수 만들어서 get card api 부르기.

(action 등록) card 조회하는 FETCH_CARD 액션 등록. SET_CARD 로 커밋

(mutation) 현재 card 상태값을 전역으로 등록시키기 위한 변이 함수인 SET_CARD 만든다.

(state) card: {} 현재 카드 객체 내용을 저장해둘 state 값 등록.

-- api 연동 등록 끝, 사용 해보기 --

(기존의 테스트용인 watch, fetchdata(), data 내용 지움)

[Card]에서 computed속성으로 mapState에서 card 지정하고

methods속성으로 mapActions에서 FETCH_CARD 지정하고

created() 훅에서 param cid 값을 FETCH_CARD에 지정해서 실행시킴

template 부분 수정

  <Modal>

    <div slot="body">

      {{card}}

    </div>

  </Modal>

-- card markup 추가 --

card/show-api branch에서 (Card markup/css 작업) 변경내용 추가

카드 수정

-- 수정하기위한 api 연동 작업 --

(api) update 함수 만든다.

(action) UPDATE_CARD 만든다.

-- card title 클릭하면 수정상태되고 바깥 클릭하면 저장되도록 구현 --

data()에 toggleTitle: false 상태값 변수 생성

<input class="form-control" type="text" :value="card.title"

:readonly="!toggleTitle" @click="toggleTitle=true" @blur="onBlurTitle"

ref="inputTitle">

fetchCard(), onBlurTitle() method 만들어서 수정하고 blur상태일 때 card update api 부르도록 함. -> fetch 실행해서 다시 수정된 card 내용 가져옴

-- card description 도 같은 방법으로 진행 --

(생략) 

참고 : 인프런 강의 - 트렐로 개발