vuejs 라디오 버튼 구성 요소

Question

vuejs에서 작동하는이 사용자 정의 라디오 버튼 구성 요소를 만들려고합니다. 부모 구성 요소의 값으로 라디오 버튼을 선택하는 방법은 무엇입니까? 나는 당신이 v-model을 사용하고 입력 값 중 하나에서 같은 값으로 설정한다는 것을 알고 있지만 작동시키지 못하는 것 같습니다.

구성 요소 : export default Vue.component('radioButton', { template, props: ['name', 'label', 'id', 'value'] })

구성 요소 템플릿 :

<label class="radio" :for="id"> 
    <input type="radio" :id="id" class="radio-button" :value="value" :name="name"> 
    <span class="radio-circle"> 
    </span> 
    <span class="radio-circle__inner"> 
    </span> 
    <span class="radio-button__label">{{ label }}</span> 
</label> 

HTML : 라디오 버튼의

<radio-button name="options" id="option-1" label="1" :value="selectedValue" /> 
<radio-button name="options" id="option-2" label="2" :value="selectedValue" /> 

Answer 1

, 당신은 확인 속성을 미리 설정하기가 참 또는 거짓 통과해야 어떤 주에. 또는 v-model의 값이 라디오 버튼 value과 같아야 검사 할 수 있습니다. 당신이 게시 한 제한된 샘플 코드에서

, 당신의 레이블 등 1, 2, 3과 같은 버튼 지수 믿습니다 ... 그리고 난 당신이 버튼 중 하나를 선택하려는 생각하면 selectedValue 일치 label 그 라디오 버튼. 예를 들어, selectedValue가 2이면 라디오 버튼 2를 확인합니다. 위가 올바른 가정

, 당신은 radio-button 구성 요소 서식 파일에 한 줄을 수정해야합니다 :

<input type="radio" class="radio-button" :value="label" :name="name" v-model="value"> 

참고 :

1. 귀하의 버튼 label 라디오 버튼의 값이입니다. 이것은 특정 라디오 버튼을 클릭 할 때 selectedValue로 설정할 것으로 예상되는 것입니다.

2. 하위 구성 요소에있는 value은 실제로 부모 구성 요소의 selectedValue이며 현재 선택되는 라디오 버튼을 나타냅니다. 그래서이 Form Input Bindings의 문서에 따라, 그래서 v-model

에 가야한다, 라디오 버튼은 V 모델 변수가 라디오 버튼의 값과 동일한 경우 검사받을 것입니다.

이제 다른 문제가 있습니다. 다른 라디오 버튼을 클릭하면 부모 구성 요소의 selectedValue이 변경 될 것으로 예상됩니다. props은 단방향 바인딩 만 제공하기 때문에 그런 일은 일어나지 않을 것입니다.

이 문제를 해결하려면 자식 구성 요소 (라디오 버튼)에서 $ emit을 수행하고 부모 구성 요소 (양식)에 캡처해야합니다. 여기

가 작동 jsFiddle의 예는 다음과 같이이 예에서 https://jsfiddle.net/mani04/3uznmk72/

, 양식 템플릿은 라디오 버튼 구성 요소를 정의

<radio-button name="options" label="1" :value="selectedValue" @change="changeValue"/> 
<radio-button name="options" label="2" :value="selectedValue" @change="changeValue"/> 

하는 하위 구성 요소 내부의 값이 변경, 그것은을 통과 할 때마다 라디오 버튼의 레이블과 함께 "change"이벤트가 전달되어 부모 폼 구성 요소의 메소드 changeValue()에 전달됩니다.부모 구성 요소가 selectedValue으로 변경되면 라디오 버튼이 자동으로 업데이트됩니다.

희망 하시겠습니까?