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' : ''"