How to set chip color individually

Question

I have created an input field that only accepts valid email addresses and put each address within a chip. If it saw an invalid email, the chip's color of that input is set to red. However, when it sees an invalid email, all chips turns red (see images below). How do I set only the invalid email chip's color to red?

Here's my code:

template:

<template>
<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="color"
                @input="remove(data.item)">
            <strong>{{ data.item }}</strong>&nbsp;
        </v-chip>
    </template>
</v-combobox>

script:

<script>
export default {
    data() {
        return {
            color: '',
            value: false,
            chips: [],
            emailRules: [
                v => {
                    if (!v || v.length < 1)
                        return 'Input is required';
                    else if (v.length > 0) {
                        for (let i = 0; i < v.length; i++) {
                            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[i]))) {
                                this.color = "red";
                                return 'Invalid email';
                            } else {
                                this.color = "gray";
                            }
                        }
                    }
                    else return true;
                }
            ]
        }
    },

    methods: {
        remove(item) {
            this.chips.splice(this.chips.indexOf(item), 1)
            this.chips = [...this.chips]
        }
    }
}

I'm new to VueJS so I don't really know how stuff works here, and I saw nothing in the net that could help me. Anyway, thanks!

Answer 1

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";
            }
     }

}