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 color of v-chip on click

In this post, we will explore how to change the color of Vuetify's v-chip component when it is clicked. Vuetify is a popular UI framework for Vue.js, and it provides a wide range of components to build beautiful and responsive web applications.

The v-chip component is often used to display small pieces of information or trigger actions. By default, v-chips come with predefined colors. However, we want to make them dynamic by changing their colors on click.

written

reviewed

updated

Here is the code snippet that demonstrates how to achieve this behavior:

In this code, we have a v-container that holds five v-chip elements. Each v-chip is bound to a color property that is determined by the value of a data variable, like isClicked1. The color changes from the primary color to the secondary color (and other combinations) when the v-chip is clicked. The @click event handler toggles the value of the corresponding data variable

<v-container>
    <h3>Vuetify Change color of v-chip on click </h3>
    <v-chip :color="isClicked1 ? 'primary' : 'secondary'" @click="isClicked1 = !isClicked1">
        <v-icon> mdi-check</v-icon>
        Click me!
    </v-chip>

    <v-chip :color="isClicked2 ? 'red' : 'dark'" @click="isClicked2 = !isClicked2">
        <v-icon>mdi-heart</v-icon>
        Love
    </v-chip>

    <v-chip :color="isClicked3 ? 'green' : 'yellow'" @click="isClicked3 = !isClicked3">
        <v-icon>mdi-tree</v-icon>
        Nature
    </v-chip>

    <v-chip :color="isClicked4 ? 'blue' : 'pink'" @click="isClicked4 = !isClicked4">
        <v-icon>mdi-water</v-icon>
        Water
    </v-chip>

    <v-chip :color="isClicked5 ? 'red' : 'orange'" @click="isClicked5 = !isClicked5">
        <v-icon>mdi-flower</v-icon>
        Flower
    </v-chip>
</v-container>

Run

Here is the JavaScript part that sets up the Vue.js instance:

Changing Vuetify v-chip Color on Click

<script>
    new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        data: () => ({
            isClicked1: false,
            isClicked2: false,
            isClicked3: false,
            isClicked4: false,
            isClicked5: false,
        }),
    })
</script>

This code initializes a new Vue instance with a data section that defines the initial values of our click variables.

Output of Vuetify Change Color Of V-Chip On Click

Pasted Image

In conclusion, this post demonstrates how to change the color of Vuetify's v-chip component on click using Vue.js. This interactivity enhances the user experience and allows you to create engaging web applications with Vuetify. Feel free to modify the colors and icons to suit your project's needs and styling preferences.

Vuetify

Vuetify Change color of v-chip on click

Feedback for Abhishek

Changing Vuetify v-chip Color on Click