Vuetify

Vuetify Alert fade after a duration Vuetify Login Form Vuetify Toast Snackbar Demo Vuetify Disable Past Date in DatePicker Vuetify Scrollable Dialog Vuetify Dialog to Confirm Delete Vuetify input File get Selected file name Vuetify validate textarea character limit Vuetify V-Select multiple example Vuetify Checkbox Check All | Uncheck All Example Vuetify Disable Button for Certain Amount of Time Vuetify Validate Email Field Vuetify Change Button Color if Button active or selected Vuetify Change color of v-chip on click Vuetify Image Upload with Preview Vuetify Clear text field using ref Vuetify Disable Future date in Datepicker Vuetify Set Current Date in Datepicker Vuetify rule for Number Between 0 and 999 or no input Vuetify Validation Rule: Allow Empty String or Specific Number of Characters Vuetify Allow only alphanumeric characters in textfield Vuetify Rule Input Text only Accept Number and Dot Vuetify set Confirm Password Validation Rule in text-fields Vuetify Text Field Allow 10 digit Number Vuetify Add Comma to Input Field Automatically Vuetify Check if input contains special characters

Vuetify Change Button Color if Button active or selected

In this tutorial, we will explore how to change the color of Vuetify buttons when they are active or selected. We'll be using Vue.js and Vuetify to create a simple interface with three buttons. The button that is clicked will change color to indicate its active state. This functionality is achieved by dynamically adding a CSS class to the buttons

written

reviewed

updated

How to Change Button Color in Vuetify When the Button is Active or Selected?

The HTML Structure consists of a Vuetify container containing three buttons, each with a click event listener. The buttons have a default primary color and a dynamic class binding to change their color when they are active

Changing Vuetify Button Color When Active or Selected

<v-container>
    <h3>Vuetify Change Button Color if Button active or selected</h3>
    <v-btn @click="changeActiveButton(1)" color="primary" :class="{ 'active-button': activeButton === 1 }">Button
        1</v-btn>
    <v-btn @click="changeActiveButton(2)" color="primary" :class="{ 'active-button': activeButton === 2 }">Button
        2</v-btn>
    <v-btn @click="changeActiveButton(3)" color="primary" :class="{ 'active-button': activeButton === 3 }">Button
        3</v-btn>

</v-container>

 
<v-container>
    <h3>Vuetify Change Button Color if Button active or selected</h3>
    <v-btn @click="changeActiveButton(1)" color="primary" :class="{ 'active-button': activeButton === 1 }">Button
        1</v-btn>
    <v-btn @click="changeActiveButton(2)" color="primary" :class="{ 'active-button': activeButton === 2 }">Button
        2</v-btn>
    <v-btn @click="changeActiveButton(3)" color="primary" :class="{ 'active-button': activeButton === 3 }">Button
        3</v-btn>
​
</v-container>

Run

In the JavaScript code, we use Vue.js and Vuetify to create our application. We set up a Vue app and define the 'activeButton' data property, initialized to 'null'. This property stores the currently active button number. We also define a method called 'changeActiveButton', which is called when a button is clicked.

The JavaScript Code

<script type="module">
    const { createApp } = Vue;
    const { createVuetify } = Vuetify;
    const vuetify = createVuetify();

    createApp({
        data() {
            return {
                activeButton: null,
            };
        },
        methods: {
            changeActiveButton(buttonNumber) {
                if (this.activeButton === buttonNumber) {
                    // If the clicked button is already active, deactivate it
                    this.activeButton = null;
                } else {
                    // Deactivate the previously active button
                    this.activeButton = buttonNumber;
                }
            },
        },

    })
        .use(vuetify)
        .mount('#app');
</script>

 
<script type="module">
    const { createApp } = Vue;
    const { createVuetify } = Vuetify;
    const vuetify = createVuetify();
​
    createApp({
        data() {
            return {
                activeButton: null,
            };
        },
        methods: {
            changeActiveButton(buttonNumber) {
                if (this.activeButton === buttonNumber) {
                    // If the clicked button is already active, deactivate it
                    this.activeButton = null;
                } else {
                    // Deactivate the previously active button
                    this.activeButton = buttonNumber;
                }
            },
        },
​
    })
        .use(vuetify)
        .mount('#app');
</script>

The 'changeActiveButton' method takes a 'buttonNumber' argument to identify which button was clicked. If the clicked button is already active, we set 'activeButton' to 'null' to deactivate it. If a different button is clicked, we update 'activeButton' with the 'buttonNumber', effectively deactivating the previously active button and activating the newly clicked one.

By using the ':class' directive, we apply the 'active-button' CSS class to the buttons when 'activeButton' is equal to their respective button numbers. This class is responsible for changing the button's color when active.

Pasted Image

Output of Vuetify Change Button Color If Button Active Or Selected