BS4 라디오 버튼 그룹에서 Vue v-model이 반응하지 않음

BS4 라디오 버튼 그룹에서 Vue v-model이 반응하지 않음

너무 오래 보고 있어서 간단한 걸 놓쳤으면 좋겠는데 난감하네요.

vuejs에 입력된 양식이 있습니다.저는 "젠더"를 선택하기 위한 두 개의 라디오 버튼을 가지고 있고, 바인딩은 완벽하게 작동합니다.옵션 버튼 중 하나를 클릭하면 vue 컴포넌트인스펙터에서 데이터 변경을 확인할 수 있습니다.

그러나 라디오 버튼을 Bootstrap 4 버튼 그룹으로 변경하려고 하는데 v-model 바인딩이 작동하지 않습니다.버튼 그룹의 버튼 중 하나를 클릭해도 vue 데이터의 gender_id가 업데이트되지 않습니다.

폼 입력 값은 vue 컴포넌트 속성을 통해 입력되지만 간단하게 하기 위해 라디오 버튼/버튼 그룹의 데이터는 다음과 같습니다.

export default {
    data() {
        return {
            genders: {
                1: "Men's",
                2: "Women's"
            },
            gender_id: {
                type: Number,
                default: null
            }
        }
    }
}

라디오 버튼 버전(정상적으로 동작하고 있는 버전)의 코드를 다음에 나타냅니다.

<div class="form-group">
    <label>Gender:</label>
    <div>
        <div class="form-check form-check-inline" v-for="(gender, key) in genders" :key="key">
            <input type="radio"
                class="form-check-input"
                name="gender_id"
                :id="'gender_' + key"
                :value="key"
                v-model.number="gender_id">
            <label class="form-check-label" :for="'gender_' + key">
                {{ gender }}
            </label>
        </div>
    </div>
</div>

다음은 vue의 gender_id 데이터에 제대로 바인딩되지 않은 버튼 그룹 버전입니다.

<div class="form-group">
    <label>Gender:</label>
    <div>
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-outline-secondary" v-for="(gender, key) in genders" :key="key">
                <input type="radio"
                    class="btn-group-toggle"
                    name="gender_id"
                    :id="'gender_' + key"
                    :value="key"
                    autocomplete="off"
                    v-model.number="gender_id">
                {{ gender }}
            </label>
        </div>
    </div>
</div>

이 작업을 수행하기 위해 다음 Boostrap 4 문서를 사용하고 있습니다.https://getbootstrap.com/docs/4.0/components/buttons/ #무선/무선 서비스

버튼 그룹 문서에는 무선 입력의 값 속성이 포함되어 있지 않지만 양식 라디오 버튼 문서에는 포함되어 있습니다.https://getbootstrap.com/docs/4.0/components/forms/ #예약/예약

이것은 단순화를 위한 것입니까, 아니면 라디오 버튼의 버튼 그룹이 체크된 버튼의 값조차 반환하지 않는 것입니까?

버튼 그룹이 라디오 버튼으로서 기능하지 않는다고 하는 다른 스레드도 있습니다만, BS4의 경우라면, Bootstrap에 위의 설명서에서와 같이 라디오 버튼이 있는 버튼 그룹이 있는 이유는 무엇입니까?체크된 상태를 가져올 수 없는 경우,<button>대신<label><input type=radio></label>?

내가 무엇을 잘못하고 있는지, 또는 제대로 이해하지 못하는지에 대한 의견이 있습니까?

정말 고마워요!

@ebbmart에게 유익한 통찰력을 주셔서 감사합니다.

이 문제는 버튼 그룹의 버튼에 javascript를 적용하려고 하는 vue와 부트스트랩에 관련된 것입니다.

하려면 , 「」 「」 「」 「」를 하는 것만으로 .data-toggle="buttons"버튼을 클릭합니다. js는 groupdata-toggle js를 할 수 .

말은 도 없어요.v-model

는 반드시 추가해야 합니다."active"<label> 버튼을 .<input>.

동작 예에 대해서는, 이 바이올린을 참조해 주세요.

그걸 노리는 거야?

언급URL : https://stackoverflow.com/questions/49414388/vue-v-model-not-reactive-with-bs4-radio-button-group