如何单独设置芯片颜色

Question

我已经创建了一个输入字段，它只接受有效的电子邮件地址，并将每个地址放入芯片中。如果它看到一封无效的电子邮件，芯片的输入颜色就会设置为红色。然而，当它看到一封无效的电子邮件时，所有的芯片都会变成红色(见下图)。如何仅将无效电子邮件芯片的颜色设置为红色？

​

​

​

​

下面是我的代码：

模板：

<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>
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]
        }
    }
}

​

我是VueJS的新手，所以我真的不知道这里的东西是如何工作的，我在网络上看不到任何可以帮助我的东西。无论如何，谢谢！

Answer 1

您需要为每个项目设置颜色，而不是全局颜色。您可以尝试使用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>

然后定义方法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";
            }
     }

}