[Vuejs]-How to set chip color individually

by

4👍

✅

You need to set color for each item, not global color. You can try using method:

<v-combobox v-model="chips"
            label="Emails"
            chips
            clearable
            solo
            :rules="emailRules"
            multiple>
    <template v-slot:selection="data">
        <v-chip :selected="data.selected"
                close
                :color="getColor(data.item)"
                @input="remove(data.item)">
            <strong>{{ data.item }}</strong>&nbsp;
        </v-chip>
    </template>
</v-combobox>

and then defined method getColor

methods: {
    getColor (v) {

            if (!(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,24}))$/.test(v))) {
                return "red";
            } else {
                return "gray";
            }
     }

}
👤ittus

Leave a comment