Check validation of single v-text-field on vuetify 3

Question

I have a component holding v-text-field input. On vue2 with vuetify 2, I was able to control the background of the input like this

The html

<v-text-field
  :background-color="setInputBgColor()"
  ref="input"
  :disabled="disabled"
  v-model="inputValue"
  @blur="validateInput()"
  :rules="[required]"
>
</v-text-field>

And the setInputBgColor function:

setInputBgColor () {
  if (this.error || (this.$refs.input && !this.$refs.input.valid)) {
    return '#FCDFDF'
  }
    return '#F4F4F4'
  },

So, with this.$refs.input.valid I was able to control if the input was not valid according to the rules

In Vue3 i have updated the HTML according to vuetify3 (basically change prop to bg-color):

<v-text-field
  :bg-color="setInputBgColor()"
  ref="input"
  v-model="inputValue"
  @blur="validateInput()"
  :rules="[required]"
>
</v-text-field>

But the this.$refs.input.valid is not longer working, and I can't find a proper way to do it. Is there any alternative to this.$refs.input.valid?

After some investigation I found that apparently you still can use it with async/await, something like const valid = await this.$refs.input.validate(); but this does not work to set the background color, because

Invalid prop: type check failed for prop "bgColor". Expected String with value "[object Promise]", got Promise.

Any hint or alternative? I don't know what i am doing wrong, and the only way I can think of achieving similar functionality to what I had in Vue 2 is by manually handling when the rules are not met.

Thanks

Answer 1

There is no replacement as far as I know for the valid() function on the individual component. VForm I believe provides more granular validation techniques, specifically with vee-validate... but looking at your specific problem, you could solve it with regular CSS stylings as a workaround:

<style scoped>
  .v-text-field :deep(.v-field) {
    background-color: #f4f4f4;
  }
  .v-text-field :deep(.v-field--error) {
    background-color: #fcdfdf;
  }
</style>

Vuetify Playground demo