vue.js의 radio 버튼 동작 제어하는 방법.

Question

안녕하세요. 이번에 코드를 수정해야 하는데 어려움이 있어서 글을 올립니다.confirm에서 받을 참/거짓 값을 기준으로 radio button의 값 변경과 checked 표기를 제어해야 하는데 데이터 제어에는 성공했으나 화면에 출력되는 radio에는 checked가 되는 문제가 있습니다.아래는 예시 코드입니다.

qqqm · Answer

데이터 제어가 잘 된다는 가정하에 input name 어트리뷰트 이용하여 그룹핑 해보세요. 그리고 if문 로직이 간단할 경우 삼항 연산자를 이용해보세요. this.kind &#61; result ? newValue : oldValue;

벼랑끝에서올라오는중 · Answer

오랜만에 vue 하려니까 혼났네요;;아래는 기본 checked가 없다는 가정입니다. kind 대신 selectedSubject로 바꿨습니다.기본 checked를 만들려면 selectedSubject에 기본 checked를 하고 싶은 value를 직접 써주면 됩니다.selectedSubject: "math",기본 checked가 있다면, 처음 진입할 때 early return 조건문도 아래와 같이 수정하면 됩니다. !this.selectedSubject는 checked가 되어있지 않을 때 '최초' check까지는 아무 조건없이 용인하게 하려고 넣은 겁니다. if (this.selectedSubject === event.target.value ) { return; }change event에서는 안되고, click event에서 막아야 하네요. click -> change로 전파되는 듯 한데, click에서 event를 막아야 checked되는 동작을 막을 수 있습니다. 서로 경합하는 input value(저 radio 중에 하나만 value로 채택)된다고 생각되어 v-model 집어넣었습니다. 수학 국어 영어 selectedSubject: "", . . . clickSubject(event) { if (this.selectedSubject === event.target.value || !this.selectedSubject) { return; } const result = confirm("변경하시겠습니까?"); if (!result) { event.preventDefault(); } else { this.selectedSubject = event.target.value } console.log(this.selectedSubject); }

vue.js의 radio 버튼 동작 제어하는 방법.

2개의 답변

Q&A 목록