Vuejs 和引导程序。有条件地禁用按钮组中的按钮

Question

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

在我的旧应用程序中，如果选择了按钮组中的按钮，它将禁用另一个按钮组中的按钮（通过将 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 有更优雅的方法？我对 vue 非常陌生，并且学习了所有的细微差别和完成工作的方法，考虑到我的按钮组在 v-for 循环中，我只是不知道如何处理这个问题。我什至考虑过放弃引导程序并在 vue 库中重写整个东西，比如 vuetify。

Answer 1

一定要用 Vue.js 重写它。 正是这些“状态”在 Vue 中比通过 jQuery 更容易管理。

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

也许您的应用程序中有一个变量imp_size，那么依赖于该值的每个按钮都可以类似于

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

表示当imp_size 不是18" 时，按钮被禁用。

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