基于API响应，突出显示了特定的输入红/无效

Question

基于API依据

我抓住了它并显示了一个红色警报，但最重要的是，我也想触发红色亮点 name Input 。

我的输入

<v-text-field
    :class="{ 'invalid' : invalidName }"
    dense
    outlined
    v-model="name"
    :rules="form.rules.name"
    label="Name"
    required
></v-text-field>

CSS

>>> .invalid .v-label {
    color: #b13737 !important;
    caret-color: #ff5252 !important;
}

>>> .invalid input {
    color: #b13737 !important;
    caret-color: #ff5252 !important;
}

>>> .invalid .v-text-field--outlined fieldset {
    border: 2px solid #b13737 !important;
}

捕获

this.invalidName = true //turned it to true when error detected 
this.alert = true
this.alertColor = 'red'
this.alertMessage = response.data.error.detail

结果

我只能将标签和文本的颜色和颜色变

Answer 1

有时候，Vuetify的CSS有些棘手。尝试这样做：

.theme--light.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state)
  > .v-input__control
  > .v-input__slot
  fieldset {
  border: 2px solid #b13737 !important
}

Answer 2

不要与Vuetify输入错误状态CSS手动混乱。而是尝试使用错误（boolean）和error-messages（字符串或数组）（（如果您不隐藏详细信息）） 。

如果您可以在响应中解析错误，我建议构建一个inputErrors对象，其中键是字段的名称和值是（可能）错误消息。特别是如果您在一个提交中显示多个错误字段。

您可以用.split（'：'：'）对data.err.Error.Error.Errer.Erferion进行解析，然后使用索引[0]作为上述inputErrors对象的键和index [1]值。

然后，您可以通过编程使用文本字段的错误道具。

<v-text-field
  :error="inputErrors['name']"
  :error-messages="inputErrors['name']"
>

您可能不需要两者。如果错误消息不是null，则可能是错误状态为true。