Vue.js 회원정보수정 구현

써니·2023년 1월 21일
0

vue.js

목록 보기
11/15

회원정보수정

구현방법을 알려주기 전에 일단 v-model을 사용하지 않았다.
v-model를 하려면 data에 default값을 넣어놔야하는데
그럼 원래의 회원정보가 불러오지 못하고 공백처리가 되었다.
비밀번호확인 빼고는 javascript처럼 document.getElementById를 구현했다.


구현과정

먼저 불러온 값을 bind해서 :value안에 담았다.
name / id는 name이라고 함

select 값을 가져오는 것은 살짝 어려웠지만 이전에 회원 가입시
구현을 해봤기 때문에 오래걸리진 않았다.
가져온 값을 selected에 해서 넣고 v-show 이벤트를 줘서 false로 보이지 않게 하였다.


함수구현

각각의 값을 document.getElementById("아아디이름").value로 값을 가져와 공백 체크를 했다.
사실 처음에 password는 v-model로 했다고 했지만
이게 문제가 있었다.
패스워드를 입력하면 그전에 수정했던 내용이 원래대로 돌아가는 것이다.
결국 v-model를 삭제하고 다른 것과 마찬가지고 id값을 가져와서 구현했다.


select 박스 값 가져오기

사실 let 각각 선언해주는 게 깔끔하다
다른 값은 그대로 request에 넣어주면 되지만 select 값이 문제였다.
select 값을 불러오는 것은 사실 간단하다.
target이라는 것에 document.getElementById("gender")를 가져온다
그리고 target.options[target.selectIndex].value를 하면 값을 가져올 수 있다.




마지막 오류 체크

아직 해결은 안됐지만 나름의 해결 방안을 알려주자면
update를 patch로 구현을 일단 했다.
put이어도 상관은 없지만 만약 request에 정보를 다 담아가지 않는 경우
put은 대체이기 때문에 고치지 않은 값은 null값이 뜰 수 있다는 점!
아무튼 이렇게 구현하고 새로고침되면서 url query String으로 값이
다 뜨는 것이다...


그 이유는 created 때문이다.
회원 정보를 불러올 때 created로 get를 호출한다.
get은 파라미터 정보를 다 보여주기 때문에 그것이 노출되었던 것이다.
그래서 나는 mounted에 profile로 새로고침하여 그 문제를 해결했다.

어떤 방법이 맞는 건지는 모르겠지만 이게 최선이었다

0개의 댓글