Vuejs and Bootstrap. Disable buttons in button group conditionally

Question

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.

Similar to how you have :class="{ 'active': selectedImpellerSize === impSize }" to dynamically set the active class on elements based on the value of a data variable, you can also do the same for the disabled property. — Taplar
– Taplar, Commented Nov 26, 2018 at 15:56
Short answer, no. You don't want to do this logic with jQuery in a vue application. You want to update the data model and let vue adjust the view accordingly. — Taplar
– Taplar, Commented Nov 26, 2018 at 15:56

Matthias S · Accepted Answer · 2018-11-26 16:00:14Z

4

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.

answered Nov 26, 2018 at 16:00

Matthias S

3,5834 gold badges26 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kenny Over a year ago

I ended up doing this using conditionals in my class bindings: codepen.io/drpcken/pen/RqYxZX I feel like it could be cleaner but it works! Thanks!

Collectives™ on Stack Overflow

Vuejs and Bootstrap. Disable buttons in button group conditionally

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related