How to change vue/vuetify text field color conditionally

You can use v-bind with ternary condition to apply style

 <v-text-field
       v-bind:style="{'border': documentData[name] ? 'solid green 1px !important':'solid red 1px!important'}"
       v-model="documentData[name]"
       :label="name"
       :placeholder="value"
        regular/>

Note - You cannot user color for changing text by using. & highlight box color as well as if you use background-color in place of border you can change whole field color.


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>

you can conditionally bind classes like this:

:class="myModel.someBool ? 'red--text' : ''"