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 =”按钮“属性时，它就开始工作了！任何人都可以帮我找到合适的工作吗？

修改

对于那些不知道的人来说，数据切换来自bootstrap按钮插件，它为你正在制作的按钮添加了额外的样式和功能。看看这里的文档： https://getbootstrap.com/docs/4.0/components/buttons/#toggle-states

Answer 1

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

Answer 2

终于得到了解决方案

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

第1步

将以上模板更改为以下内容（从输入中删除v模型）

<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步（更新时间：6/18/2018）

创建指令

就我而言，由于我使用的是单个文件组件，我需要以下列方式引入它：

radio.js

export default {
    inserted: function (el) {
        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点击事件绑定到包含v-radio的div中的每个单选按钮。我在做函数集的第二部分（从参考文献中的答案中复制），它检查表达式中是否有任何点，否则它设置vnode.context的值[＆＃34 ; channel＆＃34;]，更新模型。绑定在组件加载之前挂钩到事件，因此它可以准备触发单选按钮的内部工作。

在将组件物理插入父节点期间，在bind之后调用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>

使用这些链接作为参考：

使用Bootstrap 4的VUE 2 - 使用data-toggle =“按钮”

2 个答案: