부트스트랩 4가 있는 VUE 2 - data-backet="backet" 사용 시 라디오 버튼 동작이 작동하지 않음

부트스트랩 4가 있는 VUE 2 - data-backet="backet" 사용 시 라디오 버튼 동작이 작동하지 않음

다음 코드가 있습니다.

<template>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-outline-dark active">
            <input type="radio" name="grp" v-model="channel" value="vh1" checked> VH1
        </label>
        <label class="btn btn-outline-dark">
            <input type="radio" name="grp" v-model="channel" value="mtv"> MTV
        </label>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                channel: 'mtv'
            }
        },
        watch: {
            channel: function(newValue) {
                console.log('value has been changed to ' + newValue);
            }
        }
     }
</script>

라디오 버튼을 클릭해도 아무 일도 일어나지 않는다.하지만 스타일링의 "data-timeout="artribute를 삭제했더니 동작하기 시작했어!이 근처에 일 찾는 것 좀 도와줄 사람 없어요?

편집

모르시는 분들을 위해 데이터 토글은 부트스트랩 버튼 플러그인에서 가져온 것입니다.그것은 당신이 만들고 있는 버튼에 스타일과 기능을 더합니다.다음 문서를 참조하십시오.https://getbootstrap.com/docs/4.0/components/buttons/ #documents-states

제거한다.data-toggle및 세트active에 따라 분류하다.:class="{ 'active': channel === [value] }"각 입력에 대해.

드디어 솔루션을 손에 넣었다

오랜 시간 동안 찾아본 끝에, 나는 버튼을 해킹하는 방법을 생각해 낼 수 있었다.

순서 1

위 템플릿을 다음과 같이 변경합니다(입력에서 v-model 제거).

<template>
    <div class="btn-group" data-toggle="buttons" v-radio="channel">
        <label class="btn btn-outline-dark active">
            <input type="radio" name="grp" value="vh1" checked> VH1
        </label>
        <label class="btn btn-outline-dark">
            <input type="radio" name="grp" value="mtv"> MTV
        </label>
    </div>
</template>

이 솔루션은 찾기가 매우 어려웠고, 해답은 꽤 엉성했지만, 일을 완수했습니다.

스텝 2 (2018년 6월 18일 갱신)

지시문 작성

제 경우 단일 파일 구성 요소를 사용했기 때문에 다음과 같은 방식으로 지시문을 가져와야 했습니다.

radio.displaces

export default {
    inserted: function (el, binding) {
        var btns = $(el).find('.btn');
        var radioGrpName = $(btns[0]).find('input')[0].name;
        $("input[name='" + radioGrpName + "'][value='" + binding.value + "']").closest('.btn').button('toggle');
    },
    bind: function (el, binding, vnode) {
        var btns = $(el).find('.btn');
        btns.each(function () {
            $(this).on('click', function () {
                var v = $(this).find('input').get(0).value;
                (function set(obj, str, val) {
                    str = str.split('.');
                    while (str.length > 1) {
                        obj = obj[str.shift()];
                    }
                    return obj[str.shift()] = val;
                })(vnode.context, binding.expression, v);
            })
        })
    }
}

이렇게 하면 jquery click 이벤트가 v-radio를 포함하는 div에 있는 각 라디오 버튼에 바인딩됩니다.함수 집합을 수행하는 두 번째 부분(참조 응답에서 복사)에서는 식에 점이 있는지 확인하고, 그렇지 않으면 vnode.context["channel"]의 값을 설정하여 모델을 업데이트합니다.바인드는 컴포넌트가 로드되기 전에 이벤트에 접속되므로 라디오 버튼의 내부 동작을 시작할 준비가 됩니다.

삽입된 함수는 바인드 후 부모 노드에 컴포넌트를 물리적으로 삽입하는 동안 호출됩니다.따라서 초기 상태(이벤트 발생 없음)를 설정하면 컴포넌트는 데이터에 설정된 값을 자동으로 반영합니다.

순서 3

스크립트에 지시 무선을 추가하다

import radio from '../../directives/radio'
<script>
    export default {
        directives: {
            radio: radio  
        },
        data() {
            return {
                channel: 'mtv'
            }
        },
        //you can use computed property, but you need get and set
        watch: {
             channel: function(newValue) {
                 console.log('value has been changed to ' + newValue);
             }
         }
     }
 </script>

다음 링크를 참조로 사용합니다.

• vue 1을 사용한 오래된 커스텀 디렉티브 해킹
• 사용자 지정 지시문에서 모델 업데이트

언급URL : https://stackoverflow.com/questions/49023790/vue-2-with-bootstrap-4-radio-button-action-not-working-when-using-data-toggle