Question

我一直在努力将自己的一个Web应用程序（jquery / php / bootstrap）迁移到VueJS。这是一个简单的表格，顶部具有过滤器控件（带有引导按钮组）。在新的vuejs应用中Here's一个带有fitler控件的codepen。

在我的旧应用中，如果选择了按钮组中的一个按钮，则会禁用另一个按钮组中的按钮（通过将disabled类添加到按钮标签中）。例如，第一个按钮组是“叶轮尺寸”。假设您选择18英寸作为叶轮尺寸，这意味着您只能选择20.5英寸的外壳尺寸，而笼形尺寸中的其他按钮将被禁用。我使用类似这样的jQuery函数来做到这一点：

 $('input:radio').change(function() {
        var senderName = this.name;
        var senderValue = this.value;
        var senderID = this.id;

        if (senderName == "imp_size"){
            switch(senderValue) {
                case "18":
                    $("#btnCageSize > label > #20\\.5").parent().removeClass("disabled");
                    $("#btnCageSize > label > #28\\.5").prop("checked", false).parent().removeClass("active").addClass("disabled");
                    $("#btnCageSize > label > #31").prop("checked", false).parent().removeClass("active").addClass("disabled");
                    //console.log('check');
                break;
                case "24":
                    $("#btnCageSize > label > #20\\.5").prop("checked", false).parent().removeClass("active").addClass("disabled");
                    $("#btnCageSize > label > #28\\.5").parent().removeClass("disabled");
                    $("#btnCageSize > label > #31").prop("checked", false).parent().removeClass("active").addClass("disabled");
                break;
                case "26":
                    $("#btnCageSize > label > #20\\.5").prop("checked", false).parent().removeClass("active").addClass("disabled");
                    $("#btnCageSize > label > #28\\.5").prop("checked", false).parent().removeClass("active").addClass("disabled");
                    $("#btnCageSize > label > #31").parent().removeClass("disabled");
                    break;
...

我的问题是我应该重用这个jquery函数还是使用vuejs的一种更优雅的方法？我真的是新手，可以学习所有细微的差别以及完成工作的方式，考虑到我的按钮组位于v-for循环中，我只是不知道该如何处理。我什至考虑过放弃引导程序，然后将整个内容重写到vuetify之类的vue库中。

Answer 1

绝对在Vue.js中重写它。正是这种“状态”在Vue中比通过jQuery易于管理。

在每个按钮内，您可以绑定:disabled属性并添加逻辑条件。

也许您的应用程序中有一个变量imp_size，然后每个依赖于该值的按钮都可能像

<button :disabled="imp_size !== '18\"'">

表示当imp_size不同于18"时，该按钮被禁用。

我建议您也看看https://bootstrap-vue.js.org/。

Vuejs和Bootstrap。有条件地禁用按钮组中的按钮

1 个答案: