带有Bootstrap 4的VUE 2-使用data-toggle =“ buttons”时，单选按钮操作不起作用

Question

我有以下代码：

<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-toggle =” buttons“属性时，它开始起作用！有人可以帮我在这里找到解决方法吗？

编辑

对于那些不知道的人，数据切换来自引导按钮插件，它为您制作的按钮增加了额外的样式和功能。在此处查看文档：https : //getbootstrap.com/docs/4.0/components/buttons/#toggle-states

Answer 1

删除data-toggle并为每个输入设置active类:class="{ 'active': channel === [value] }"。