带有 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" 属性时，它就开始工作了！谁能帮我在这里找到工作？

编辑

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

Answer 1

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

Answer 2

终于解决了

经过长时间的搜索，我想出了一种破解按钮的方法。

第 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.js

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"] 的值，它会更新模型.绑定在组件加载之前与事件挂钩，因此它可以准备触发单选按钮的内部工作。

inserted 函数在绑定之后调用，在组件物理插入父节点期间。所以当你设置一个初始状态（没有触发事件）时，组件会自动反映数据中设置的值。

第 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>

使用这些链接作为参考：

• Old custom directive hack using vue 1
• Update model from custom directive