[Vue.js 3] 다른 컴포넌트에 Query 전달
서로 부모자식이 아닐 때 데이터를 주고 받으려면 eventBus, store를 활용하거나 route를 통해서 params나 query를 통해 데이터를 전달할 수 있다. views/com1.vue (query 보냄) views/com2.vue (query 받음) views/com1 vue setup() 내용 추가 ... 생략 ... const nextPage = (data) => { router.push({ name: "com1", puery: { num: data } }) } ... 생략 ... views/com2 import { useRoute } from "vue-router"; ... 생략 ... export default { name: "com2", setup() { const route = us..
[Vue.js 3] 비밀번호 보기/숨기기 기능 구현(3항연산자 활용)
일단 로그인 화면을 만들었음 여기서 안 보이는 비밀번호가 보여기게 하려면 눈 모양 버튼을 클릭했을 때 비밀번호 input type="password"에서 type="text"로 바뀌면 됨. 덤으로 버튼 이미지도 바꿔줄거임. script 코드 작성 ref와 reactive 차이는 알거라 생각함. 모르면 구글링 ㄱㄱ 이렇게 Bool 값이 변경되도록 했다면 template 코드 일부 수정함 이렇게 작성하고 눈 모양 버튼을 클릭하면 눈 모양 버튼 이미지도 바뀌고 글자도 보여지게 됨. 참 쉽죠?
설치 npm install --save swrv 2. 파일명.vue에 사용해보기 이렇게 하면 콘솔창에 받아온 데이터가 보이게 된다. ※ 주의 ※ 이 상태로 새로고침을 하면 이상이 없는데 console.log(data.value)로 변경 후 새로고침하면 undefined 나온다. setTimeout(() => { console.log(data.value); }, 230); 이렇게 했을 때 콘솔이 정상 출력되는 것 보면 데이터 받아오는 시간보다 console 출력이 더 빠른 것으로 생각된다. 이건 데이터 받아올 때 까지 기다려야 할 것 같다. 참고 링크 : https://github.com/Kong/swrv/issues/105