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에 따라서 특정 클래스가 붙게 해주면...
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회
172619 [질문] 일본에 대해 공부하고 싶습니다 [15] 0126양력반대7040 23/09/15 7040
172618 [질문] 라데온 7900 xtx 쓰는데 방이 너무 더워지네요. 방법이 없을까요? [7] 곰돌곰돌파트나7048 23/09/14 7048
172617 [질문] 게임 추천 좀 부탁드립니다. [23] 기대6549 23/09/14 6549
172615 [삭제예정] 직장동료에게 돈을 빌려줬습니다 [6] 삭제됨6464 23/09/14 6464
172614 [질문] 맨투맨 브랜드 추천 좀 부탁드려요. [9] 지금이대로5941 23/09/14 5941
172613 [질문] 푸쉬업바 하나로 홈트 어느정도 가능한가요? [20] rukawa6657 23/09/14 6657
172612 [질문] 2023년 현재 일본의 대중적인 전자담배 [11] Tigris6502 23/09/14 6502
172611 [질문] 예쁜 새를 봤는데 혹시 이름 알 수 있을까요? [8] 브이올렛6474 23/09/14 6474
172610 [질문] 인텔 I7-13700 (non K) 모델에 수랭이 필요 할 까요? [9] 니플6335 23/09/14 6335
172609 [질문] 카드기 결제 질문 [6] 교자만두5297 23/09/14 5297
172608 [질문] 머리 속이 다 보이면 혹시 탈모인가요? [9] 교대가즈아6049 23/09/14 6049
172607 [질문] 넷플릭스에서 영어공부 겸 볼 미드 추천부탁드립니다. [2] 파르릇6566 23/09/14 6566
172606 [질문] 무한도전 어느편이었는지 질문입니다 [2] 김경호5687 23/09/14 5687
172605 [질문] 노트북 들어갈 백팩 좋은게 있을까요? [3] 티아라멘츠5817 23/09/14 5817
172604 [질문] "태종 이방원" 종영 된 사극 다시보는법 [14] 난키군6457 23/09/14 6457
172603 [질문] 애플워치 방수된다고 수영할 때 막 착용하면 안 되는 건가요? [16] 6904 23/09/14 6904
172602 [질문] 아이폰 업그레이드 질문. 현재 SE+11을 쓰고 있습니다. [4] 애플프리터5887 23/09/14 5887
172601 [질문] 아이폰 15 구입 방법 문의 [10] stayclever5922 23/09/14 5922
172600 [질문] 쇼핑앱 테무 temu 질문입니다. [6] 이르5902 23/09/14 5902
172599 [질문] 사무용 pc에 쓸 모니터 추천부탁드립니다. [10] 호기심남6656 23/09/14 6656
172598 [질문] 젠지훈 단장 테윤환 코치 사건 어떻게 되가나요? [13] lux7330 23/09/14 7330
172597 [질문] 스팀 - 문화상품권 질문입니다. [2] 잉차잉차6170 23/09/14 6170
172596 [질문] 사무용피씨 견적좀 부탁드립니다. [5] 재이소이7875 23/09/14 7875
목록 이전 다음
댓글

+ : 최근 1시간내에 달린 댓글
+ : 최근 2시간내에 달린 댓글
맨 위로