radio 에서 name 생략 가능여부
123
작성한 질문수 39
안녕하세요~
radio 에서 name 을 안적어도
정상 작동하는데,
name을 생략해도 될까요?
답변 주시면 감사하겠습니다.
<input type="radio" value="male" v-model="field" /> male
<input type="radio" value="female" v-model="field" /> female답변 2
1
안녕하세요 🙂
name 속성을 사용하지 않아도 정상적으로 동작하는 것처럼 보이지만, name 속성이 없다면 아래처럼 모든 라디오 버튼이 동시에 선택이 가능해지게 됩니다.
실제 라디오는 여러개의 선택지 중에서 1개만 선택하게 하는 요소이므로 이런 동작은 예기치 않은 동작이 될 수 있습니다.
따라서 반드시 name 속성을 지정해서 여러 개의 값 중에서 한 개만 선택될 수 있게 해줘야 합니다.
0
안녕하세요, 인프런 AI 인턴입니다. 김주원님.
radio 버튼 그룹 내에서 name 속성은 매우 중요한 역할을 합니다. name 속성은 동일한 그룹에 속하는 radio 버튼들을 하나로 묶어주는 역할을 하며, 이 속성이 있을 때에만 같은 그룹의 radio 버튼 중 하나만 선택될 수 있게 됩니다.
name 속성을 생략할 경우, 의도한 대로 작동하지 않을 수 있으며, 버튼들이 서로 독립적으로 동작하여 여러 항목을 동시에 선택할 수 있게 됩니다. 따라서, 서로 관련된 radio 버튼이라면 동일한 name을 부여하는 것이 필수적입니다.
하지만, Vue.js에서 v-model을 사용하여 변수를 바인딩한다면, name 속성을 생략하더라도 Vue가 내부에서 상태 관리를 수행하기 때문에 일반적인 HTML radio 방식과는 다르게 작동할 수 있습니다. 그러나, name 속성을 사용하는 것이 무조건적으로 안정성과 명시성을 높이므로 추천드립니다.
아래의 링크를 통해 더 구체적인 정보와 예시를 확인하실 수 있습니다:
- Vue.js에서 라디오 버튼을 사용하는 방법에 대한 질문
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
인가 코드 발급(프론트 vs 백)
0
22
2
tailwind css 적용 잘 안되면 참고하세요.
0
23
1
질문드립니다.
0
32
0
unplugin-vue-components 질문드립니다.
0
37
2
강의듣다가 헷갈려서 질문드립니다.
0
31
1
와 짐코딩님 강의 들으면서 느끼는게 많네요.
0
32
1
질문드립니다.
0
31
2
npm init vue@3.1.9
0
39
2
크롭 웹스토어 vue devtools 설치 관련
0
40
1
카카오 클라이언트 시크릿
0
191
2
snippets 작성하는 부분 설명이 있었나요?
0
48
2
ERD 질문
0
54
2
computed 의 set 함수를 통해 const 변수에 값을 담는 부분
0
52
2
개발자 툴에서 Vue가 표시되지 않는 현상.
0
93
2
소스 공유 어디서 해야하는지 궁금합니다
0
60
2
component 등록과 사용
0
57
2
chrome 확장 devtools 버전 문제
0
81
1
221. 검색 - 1 앞부분 오디오 이상합니다.
0
46
1
213. 상세(디테일) - 정보-2 질문
0
58
2
22.(해설) 검색어 자동완성 예제코드 파일 누락
0
91
2
누락파일 있으신분들
0
85
3
사람인 글자수 세기 강의에서 관련자료 문의 건
0
177
2
(해설) computed 사용하기 -2 자료 누락
0
181
2
vscode extension에서 volar검색하면 Vue Language Features(Volar)가 검색이 안되는데요
0
214
2