How to change vue/vuetify text field color conditionally

Question

I'd like to conditionally apply a text color class in a text field. The class I want is red--text, like this:

:class="{ red--text: myModel.someBool }"

...but that results in a parse error. The problem is related to the class name, I think, because this works:

<v-text-field
  v-model="myModel" label="My Text"
  :class="{ red: myModel.someBool }"
></v-text-field>

...but I want to color the text, not the whole field.

Enclosing the desired class name in quotes 'red--text' prevents the parse error, but has no effect on the color.

Is there a way to get what I want?

Answer 1

Create a custom scoped style that applies itself to the input (since the class of v-text-field is applied to a containing div).

<style scoped>
  .my-text-style >>> .v-text-field__slot input {
    color: red
  }
</style>

This style name can contain hyphens, as long as it is quoted in the class expression. Bind the class with v-bind...

<v-text-field
  v-model="myModel" label="My Text"
  :class="{ 'my-text-style': myModel.someBool }"
></v-text-field>