본문 바로가기

radiobutton2

Vue(4) v-for 문으로 라디오 버튼 만들기 하드코딩 된 라디오 버튼들을 v-for 을 사용하여 동적으로 다이나믹 리스트 렌더링을 해보자 HTML 1. for 문을 두 번 사용하였다. 먼저 Question 배열을 돌려 질문을 뿌리고, 그 안에 Values 배열을 돌려서 보기 값을 뿌려 주었다. 2. 결과확인 버튼 을 누르면 @결과 페이지로 가는 메소드 를 만들었다. **전체코드 보기(더보기 클릭) 더보기 소아청소년 비만 검사 총 {{ QUESTIONS.length }} 문항 문항 {{ i + 1 }} {{ question }} {{ item.label }} 진단 결과 확인 data() 1. 첫번째 for 문에 사용될 Question 배열, 두번째 for 문에 사용될 values 배열이 보인다. 2. valueMap 를 만들어서 알파벳값 을 실제 점.. 2021. 5. 12.
Vue(3) - 같은 value의 라디오버튼 그룹 선택 시 자동클릭 오류방지 문제상황 열심히 라디오 버튼으로 비만 테스트를 만들었다. 그런데 문제가 생겼다. 1번 보기나 2번보기를 처음 클릭했을 때 3번보기로 자동선택되는 현상이 나타났다. 해결하고자 영어로 열심히 구글링까지 해봤지만 답을 찾지 못했다. 결국 왜 나만안됨 까지 검색해봤으나 정말 없었다. 이슈화면 문제원인 - 원인은 input 의 value 가 셋 다 같은 값이기 때문이다. 아래는 내가 짠 코드이다. 빨간 박스의 value 가 0 으로 같다. - 그래서 세 개 중 하나를 클릭 했을 때 최근 마지막 코드(3번째)로 자동 선택 되는 것 같다는 결론을 내렸다. 문제해결 HTML - value 에 숫자 대신 알파벳을 대신 넣는다. 이 알파벳은 나중에 숫자와 매핑될 것이다. - 이 버튼을 클릭하면 선택한 value 의 숫자가.. 2021. 5. 12.
반응형