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

Question

我一直在努力将我的一个web应用程序(jquery/php/bootstrap(迁移到VueJS。这是一个简单的表，在顶部有过滤器控件(带有引导按钮组(。这是一个新的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循环中，我只是不知道如何处理。我甚至考虑过放弃bootstrap，在vuetify这样的vue库中重写整个过程。

Answer 1

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

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

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

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

意味着当CCD_ 7是除CCD_。

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