CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapvue.js
ItsPronounced
ItsPronounced

Reputation: 5463

Vuejs and Bootstrap. Disable buttons in button group conditionally

I have been working on migrating one of my web applications (jquery/php/bootstrap) to VueJS. It's a simple table that has filter controls (with bootstrap button groups) at the top. Here's a codepen with the fitler controls in the new vuejs app.

In my old app, if a button in a button group was selected, it would disable buttons in another button group (by adding the disabled class to the button label). For example the first button group is Impeller Size. Let's say you pick 18" as the impeller size, that means you would only be able to pick 20.5" case size, and the other buttons in cage size would be disabled. I did this with a jquery function like so:

 $('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;
...

My question is should I just reuse this jquery function or is there a more elegant method using vuejs? I'm really new to vue and learning all the little nuances and ways of getting things done, I just don't know how to handle this considering my button groups are in v-for loops. I even considered dropping bootstrap and rewriting the whole thing in a vue library like vuetify maybe.

Upvotes: 2

Views: 5609

Answers (1)

Matthias S
Matthias S

Reputation: 3563

Definitely rewrite it in Vue.js. Exactly these kind of "states" are way easier to manage in Vue than via jQuery.

Within each button, you can bind the :disabled attribute and add a logical condition.

Maybe you have a variable imp_size in your application, then every button that depends on that value can be something like

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

meaning the button is disabled when the imp_size is anything other than 18".

I recommend you take a look at https://bootstrap-vue.js.org/ too.

Upvotes: 4

Related Questions