1. 자동으로 입력된 값을 input에 받아오기
어쩌다 보니 게시판이 카톡이 되었다.
기존에 있는 비고를 수정하고 싶은데, 나는 일일히 ID를 써야지만 고칠 수 있었다.
자동으로 모든 값을 입력 창에 넣어주면 진짜 편할 것 같다는 생각이 들었다!
그렇게 하기 위해 삭제 버튼 옆에 수정 버튼을 추가했다.
이제 수정을 누르면 여기에 기존에 있던 항목이 입력되게 하면 될 것 같은데..!!
그렇다면 저장된 항목 옆에 있는 수정 버튼과, 아래 카드 형태로 저장된 수정 버튼의 기능이 달라야 할 것 같다.
수정 버튼을 눌렀을 때 왼쪽에 있는 정보들을 아래 카드에 불러오기 위해 storeData() 라는 메소드를 생성해주었다.
내가 수정 버튼을 누를 그 줄을 item으로 받고, Vue를 $app으로 받았다.
이 부분이 조금 헷갈렸는데, item 값을 $app.updateData에 저장하는 것을 생각하기가 어려웠다.
생각해보면... 이 친구들의 v-model이 updateData로 저장되어 있는데,
아직 이 구조가 어색해서 그런지 어떻게 접근해야 하는 지 생각이 잘 나지 않았다.
암튼, 그렇게 item의 프로퍼티와 $app.updateData의 프로퍼티를 맞춰서 저장해주면, 수정을 눌렀을 때 원하는 대로 동작을 한다!
2. 카드를 창으로 대체하기
수정 기능은 잘 작동 하는데, 아래로 스크롤 해서 고쳐야 한다는 사실이 꽤 귀찮다.
그리고 기능을 모르는 사람이면 내려야 한다는 사실도 모를 것 같아서, 팝업으로 만들면 좋겠다는 생각이 들었다.
modal window 라는 것을 통해 팝업을 만들어보자!
모달 창은 보던 스크린을 불투명하게 만들고 위에 팝업 창을 띄우는 형태이다. 위 움짤에서 보이는 "수정되었습니다" 와 같은 것!
원래는 더 복잡한데, 다행히 기존 시스템에 모달 관련 메소드가 정의가 되어있어서 조금 가져오기로 하였다.
이렇게 기존에 카드에 저장되어 있던 모든 형태를 가져와서 모달 내부에 넣었다.
자세한 구조는 사실 모름.. 그냥 input 태그만 보고 내가 알아서 넣었다.
id는 사용자가 수정할 수 없게 만들기 위해 class="form-control pe-none" 을 걸어주었다.
아무튼, 이 부분에서 기존 데이터 불러오기를 하고 싶기 때문에 v-model="" 통해서 뷰 바인딩을 해주었다. 난 항상 수정 할 때는 updateData로 하기 때문에 역시 마찬가지로.
여기서 실수한 내용! div modal-update 부분을 꼭 내가 현재 작업하고 있는 div app 에 넣자. 안그러면 앱에서 아무리 동작을 줘도 인식이 안되기 때문..
footer 부분에 수정 버튼을 만들어 onUpdate 메소드를 걸어주었다.
모달 창을 띄우는 메소드도 새로 정의해주고,
수정 버튼을 눌렀을 때 모달 창이 뜨도록 v-on:click 부분도 바꿔주었다.
참고로 tr v-for 부분에 v-on:click 을 넣은 이유는, 그냥 화면에서 해당 row 클릭했을 때에도 모달 창을 띄우고 싶었기 때문이다. 어느 태그에 이 기능을 넣어야 하는지 알려면 F12 누르고 화면 레이아웃에서 영역을 선택해보면 된다. 이건 나중에 자세히 다루기로..
모달 띄우는 김에 삭제도 하고 싶어서, footer 에 삭제 버튼도 넣어주었다. 간단한 동작이니 코드는 생략!
이렇게 잘 작동 한다.
