PGR21.com
- PGR21 관련된 질문 및 건의는 [건의 게시판]을 이용바랍니다.
- (2013년 3월 이전) 오래된 질문글은 [이전 질문 게시판]에 있습니다.
통합 규정을 준수해 주십시오. (2015.12.25.)
Date 2023/06/22 13:38:10
Name Mindow
Subject [질문] 웹개발자분들께 간단한 스크립트 질문 (수정됨)
개발환경: vue 3

// html
[div ref="box"]
[button @click="toggleOption"]버튼[/button]
[/div]


//script
import { ref } from 'vue'
export default {
setup(){
const toggleOption = () => {
  this.$refs.box.classList.toggle('active')
}

return { toggleOption }
}
}



---------------------------------

대충 이런 구조일 때 크롬브라우저 콘솔에
Uncaught TypeError: Cannot read properties of undefined (reading 'refs') 오류가 뜹니다.

원하는 결과는 클래스 active가 클릭할 때마다 토글되는거에요

vue2에서는 this.$refs 로 하니까 dom 접근이 되서 클릭 이벤트가 잘 먹혔던 것 같은데 vue3에서는 에러가 나더군요

어떻게 해야될까요?

참고로 div에 ref 대신에 id로 바꾸고

document.querySelector('#box')로 접근하니까 잘 먹더군요~

--------
* 개발자라면 당연히 눈치채셨겠지만 피지알 편집기 특성상 들여쓰기 이쁘게 안 되고 꺽쇠 넣으면 안 되서 대괄호로 대체한거 양해부탁드립니다 ^^;


통합규정 1.3 이용안내 인용

"Pgr은 '명문화된 삭제규정'이 반드시 필요하지 않은 분을 환영합니다.
법 없이도 사는 사람, 남에게 상처를 주지 않으면서 같이 이야기 나눌 수 있는 분이면 좋겠습니다."
보급보급
23/06/22 13:43
수정 아이콘
this.$refs 로 해보시겠습니까
23/06/22 13:46
수정 아이콘
아아 글 내용에서 누락이 되었었군요! this.$refs로 해도 안 되더군요 ㅠㅠ
하도 답답해서 this.refs 로도 시도해본게 글 내용에 누락이 되었군요
this.$refs 로 해도 콘솔창은 (reading 'refs') 오류 뱉습니다 ㅠㅠ
보급보급
23/06/22 13:57
수정 아이콘
(수정됨) 이렇게 처리하시는건 어떠신가요?
const isActive = ref(false);

const toggleOption = () => {
isActive.value = !isActive.value;
}

<div :class="isActive ? 'active' : '' " >
23/06/22 14:07
수정 아이콘
감사합니다~
아래 파인애플님 댓글을 참고하여 해보니 잘 됩니다~!
23/06/22 14:08
수정 아이콘
오잉 아래 파인애플님 댓글이 갑자기 사라짐..크크
23/06/22 13:57
수정 아이콘
https://geundung.dev/108

ref의 정의가 2와 3 에서 확 다른거같아요! 이 글 참고해보세요
23/06/22 14:16
수정 아이콘
답변 감사합니다!!
파인애플
23/06/22 14:10
수정 아이콘
직접 DOM 조작하는 것 보다는 반응형 변수로 통제하는 게 권장됩니다

<template>
<div :class="{ active: isActive }">
<button @click="toggleOption">button</button>
</div>
</template>

<script>
import { ref } from 'vue';

export default {
setup() {
const isActive = ref(false);

function toggleOption() {
isActive.value = !isActive.value;
}

return { isActive, toggleOption };
},
};
</script>
23/06/22 14:22
수정 아이콘
답변 감사합니다~!
혹시 같은 형태의 div, button 형태가 형제로 하나 더 있고
하나를 클릭하면 다른 형제는 클래스바인딩 걸어놓은게 false가 되게 하는 방법이 있을까요?
두벌이라고 가정했을 때 isActive1, isActive2 이런 식으로 각각 변수지정하니 되긴 하던데
왠지 좋은 방법은 아닌 것 같아서요~ 세벌일땐 isActive3, 10개일 땐 isActive10까지 양산할 수는 없으니까요 ^^;;
23/06/22 14:44
수정 아이콘
boolean 이 아니라 int나 enum을 써서 해결하시면 됩니다.
23/06/22 16:30
수정 아이콘
윗 댓글에 대한 답을 드리자면 현재 선택된 형제(?)의 id를 저장해두는 ref를 만들고,
현재 요소의 id가 ref에 있는 id와 같을 경우에만 active 클래스를 붙이면 될 것 같습니다.
초콜릿
23/06/22 21:04
수정 아이콘
ref로는 댓글이 있으니 reactive로 해 보면...
script setup
const state = reactive({ current: 0 });
각 버튼마다 @click할 때에 setCursor(1) 같은 거 실행되게 해 주고,
setCursor(i)는 state.current = i; 하게 하고...
div에는 :class 해서 state.current에 따라서 특정 클래스가 붙게 해주면...
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회
171366 [질문] 캐치티니핑 입문자 입니다. 구매 관련 질문 [19] MelOng7051 23/06/28 7051
171365 [삭제예정] 보행자 위협 운전자 경찰 고소/고발 과정에 대해 궁금합니다. [17] 삭제됨6739 23/06/28 6739
171364 [질문] 요즘 스타로 핫한 이시아님 손캠 영상 있나요? [32] 시너지9300 23/06/28 9300
171363 [질문] 수원역 로데오거리 cctv를 확인하려면 어디로 가야할까요? [1] 무언가6569 23/06/28 6569
171362 [질문] 컴퓨터 견적 조언 부탁드립니다. 이륙해도 될까요? [9] circleoflife10786 23/06/28 10786
171361 [질문] 가족들 보험문의 [1] 빠르8198 23/06/27 8198
171360 [질문] 탄원서 작성 질문드립니다 [4] Unknown Verses9046 23/06/27 9046
171359 [질문] [lol] 스플릿 포인트는 어떻게 확인 가능한가요? [4] 더치커피16562 23/06/27 16562
171358 [질문] 아이패드 프로 12.9를 중고로 사려고 합니다. [15] 고요9140 23/06/27 9140
171357 [삭제예정] 알리에서 살만한 가성비 모니터 추천 부탁드려요 (알리 아니어도 됨) [2] 삭제됨7677 23/06/27 7677
171356 [질문] 미서부 패키지 문의 Endor7849 23/06/27 7849
171355 [질문] 애저(MS)를 공부하고 싶습니다. [3] 교자만두9218 23/06/27 9218
171354 [질문] 도서관 열람실에 사람이 많이 없어진 이유가 뭘까요? [18] 푸끆이10019 23/06/27 10019
171353 [질문] 네이버 검색에 상위노출 시켜준다는 업체 어떤가요 [8] 로스9234 23/06/27 9234
171352 [질문] BMW X7는 어디서 어떻게 하는게 제일 좋나요? [11] 깐부치킨10711 23/06/27 10711
171351 [삭제예정] 에어컨 설치 관련 문의 [15] 삭제됨10204 23/06/27 10204
171350 [질문] 스파이더맨2 용아맥 7월중순까지도 걸려있을까요? [11] 테네브리움8074 23/06/27 8074
171349 [질문] 로스트 아크의 레이드 (혹은 컨텐츠) 관련 개발 속도관련 [6] 랜슬롯10085 23/06/27 10085
171348 [질문] 하프라이프 알릭스를 해보고 싶습니다 [2] Bedlam9281 23/06/27 9281
171347 [질문] 트래블로그 카드 질문있습니다. [3] 봄바람은살랑살랑8865 23/06/27 8865
171346 [질문] 명상이 마음안정에 효과가 있을까요? [9] CEO9037 23/06/27 9037
171345 [질문] 국가에서 해주는 대출? 디딤돌대출? 아시는분 계신가요? [4] 레너블9511 23/06/27 9511
171344 [질문] 피지알 글을 하나 찾습니다 - 글쓰기 관련 [4] 일신7412 23/06/27 7412
목록 이전 다음
댓글

+ : 최근 1시간내에 달린 댓글
+ : 최근 2시간내에 달린 댓글
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기