PGR21.com
- PGR21 관련된 질문 및 건의는 [건의 게시판]을 이용바랍니다.
- (2013년 3월 이전) 오래된 질문글은 [이전 질문 게시판]에 있습니다.
통합 규정을 준수해 주십시오. (2015.12.25.)
Date 2022/08/05 15:16:22
Name Mindow
Subject [질문] [vue js] vue 초보질문. 라디오버튼으로 탭효과 (수정됨)
vue js 초보입니다

vue js 환경에서 라디오 버튼으로 탭효과 처리를 만들어봤는데요

라디오 버튼이 3개가 있고 라디오 버튼 클릭하면 하단에 그에 맞는 박스가 노출되는 형태입니다

노출되는 방법은 v-if 같은걸로 하진 않았고 박스에 멀티 클래스 제어하는 방식으로 했습니다.

(기본은 display: none; 클래스 show가 추가되면 display: block;)


코딩 후 빌드해서 페이지 로드했더니 현상이...
라디오버튼 2를 클릭하면 박스1,3은 미노출, 박스2만 노출되어야 정상인데
박스1노출, 박스2노출, 박스3 미노출 상태가 됩니다.
웃긴 건 두번째 클릭부터는 정상으로 작동합니다.

처음 페이지 로드 or 새로고침 했을 때
첫번째 클릭시 비정상적으로 작동하고 두번째 클릭부터는 정상 작동하네요

그리고 편집기에서 소스를 이 부분에 영향 없게 수정 (예를 들어 주석을 단더던지 전혀 다른 부분 수정을 한다던지)해서
브라우저가 자동으로 다시 읽을 땐 영향이 없습니다. 해당 페이지 첫 로드나 새로 고침때만 그렇네요


pgr 에디터 특성상 들여쓰기는 안 이쁜 채로 그냥 넣을게요 양해 부탁 ^^;


[html]

꺽쇠를 넣었더니 pgr 에디터에서 그대로 안 나와서 왼쪽 꺽쇠는  [ 로 오른쪽 꺽쇠는 ]로 대체해서 넣었습니다


[div class="c-form-radio-wrap"]
                  [div class="c-form-radio"]
                    [input type="radio" name="radio-name" id="radio-id1" value="radioValue1" v-model="radioModel"]
                    [label for="radio-id1"]라디오버튼1[/label]
                  [/div]
                  [div class="c-form-radio"]
                    [input type="radio" name="radio-name" id="radio-id2" value="radioValue2" v-model="radioModel"]
                    [label for="radio-id2"]라디오버튼2[/label]
                  [/div]
                  [div class="c-form-radio"]
                    [input type="radio" name="radio-name" id="radio-id3" value="radioValue3" v-model="radioModel"]
                    [label for="radio-id3"]라디오버튼3[/label]
                  [/div]
                [/div]


                [div class="box1 show"]box1[/div]
                [div class="box2"]box2[/div]
                [div class="box3"]box3[/div]





[스크립트]

export default {
  data() {
    return {
      radioModel: 'radioValue1'
    }
  },
  watch: {
      radioModel(data){
        const box1 = document.querySelector('.box1');
        const box2 = document.querySelector('.box2');
        const box3 = document.querySelector('.box3');
        if(data == "radioValue1") {
          box2.classList.remove('show');
          box3.classList.remove('show');
          box1.classList.add('show');
        }
        else if(data == "radioValue2") {
          box1.classList.remove('show');
          box3.classList.remove('show');
          box2.classList.add('show');
        }
        else if(data == "radioValue3") {
          box1.classList.remove('show');
          box2.classList.remove('show');
          box3.classList.add('show');
        }
      }
    }
}




========================

원인이 무엇일까요

통합규정 1.3 이용안내 인용

"Pgr은 '명문화된 삭제규정'이 반드시 필요하지 않은 분을 환영합니다.
법 없이도 사는 사람, 남에게 상처를 주지 않으면서 같이 이야기 나눌 수 있는 분이면 좋겠습니다."
22/08/05 15:39
수정 아이콘
(수정됨) <div class="box1" :class="{'show' : radioModel === 'radioValue1'}">box1</div>
<div class="box2" :class="{'show' : radioModel === 'radioValue2'}">box2</div>
<div class="box3" :class="{'show' : radioModel === 'radioValue2'}">box3</div>
이렇게 바꾸시면 스크립트 부분의 watch는 필요 없어집니다.
저렇게 dom의 클래스로 접근해서 스타일을 제어하는 방식은 추천드리지 않아요

https://codepen.io/zealiath/pen/LYdmVee 이렇게만 하셔도 됩니다.
22/08/05 16:19
수정 아이콘
답변 감사합니다~! 해결되었어요~
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회
165295 [질문] 콘솔 기종 선택 부탁드립니다 [19] 영혼8152 22/08/06 8152
165294 [질문] 알뜰 요금제 추천해주세요~ [12] 쏘군4361 22/08/06 4361
165293 [질문] ASUS TUF Gaming B550-PLUS 보드와 이 HDD가 호환될까요? [2] 카오루5136 22/08/06 5136
165291 [질문] 여러분의 드림카는 무엇인가요? [54] 레너블9993 22/08/06 9993
165290 [질문] 네이버앱 통한 pgr21이용 질문드립니다 VIP3522 22/08/06 3522
165289 [질문] 마인크래프트 PS5와 스위치중 뭘로 할까요? [6] Tesla9980 22/08/06 9980
165288 [질문] mtb 29인치 타이어 psi 얼마나 넣어야하나요? [3] 그때가언제라도4584 22/08/06 4584
165287 [삭제예정] 와이프가 임신중절과 이혼을 이야기하는데, 정신과에 가야 할까요? [60] 삭제됨13366 22/08/06 13366
165286 [질문] 롤 게임 관련 유익한 대화하는 커뮤니티 없을까요? [7] 그때가언제라도5495 22/08/06 5495
165285 [질문] 폰 벤치마크 결과인데 이거 안좋은거죠? [9] 마음에평화를7639 22/08/06 7639
165284 [질문] 요새는 치과에서 아말감 안쓰나요? [8] wersdfhr5971 22/08/06 5971
165283 [질문] 요즘 부모님이랑 갈만한 축제같은거 있을까요? [1] 레너블4956 22/08/06 4956
165282 [질문] 사형인데도... 위치 추적 장치가 필요한 부분인가요? [13] 애플댄스6415 22/08/06 6415
165281 [질문] Yes24에서 산 ebook(epub)을 리디페이퍼에서 읽을 수 있을까요? [5] Jean Coq de Raltigue4553 22/08/06 4553
165280 [질문] 컴 중고로 팔려고 하는데 얼므면 될까요? [2] 지켜보고 있다5049 22/08/06 5049
165279 [질문] 우클릭하면 블루스크린 뜨는 현상 [2] 스핔스핔5999 22/08/05 5999
165278 [질문] [lol]롤에서 게임 이길때 탈주하는 분들은 무슨 이유가 있나요? [9] 종이컵8957 22/08/05 8957
165277 [질문] 전자공학 전공하신 분들께 질문 드립니다. [2] 런펭5489 22/08/05 5489
165276 [질문] 더후라이팬 치킨 비슷한 치킨 있을까요?? [4] 쿠스노키토모리6259 22/08/05 6259
165275 [질문] 0세 아기와 해외여행 가보신 분 있나요? [27] 질문쟁이9583 22/08/05 9583
165274 [질문] 이사비용 95만원 나왔는데 싼 건가요? 비싼건가요? [19] 그때가언제라도6776 22/08/05 6776
165273 [질문] 자게 신고 5건으로 글이 잠기는 것 어떻게 생각하시나요? [15] Dresden5990 22/08/05 5990
165272 [질문] 노트북 중고거래 이가격 괜찮은가요? [13] 코봉이9333 22/08/05 9333
목록 이전 다음
댓글

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