3

When I manually set the success prop on v-text-field, it turns green.

Is there anyway to get it to turn green automatically from just passing the rules?

<v-form ref="form" v-model="valid" lazy-validation>
  <v-text-field
    v-model="name"
    :rules="nameRules"
    :counter="10"
    label="Name"
    required
  ></v-text-field>
</v-form>

new Vue({
  el: '#app',
  data: () => ({
    valid: true,
    name: '',
    nameRules: [
      v => !!v || 'Name is required',
      v => (v && v.length <= 10) || 'Name must be less than 10 characters'
   ]
})

https://codepen.io/damianhelme/pen/OaepbX

Traxo
  • 18,464
  • 4
  • 75
  • 87
Damian Helme
  • 1,060
  • 2
  • 10
  • 22
  • 2
    `:success="!!name"`? – Traxo Dec 06 '18 at 13:58
  • 1
    @Traxo - neat; that works! Thanks. Does it sound like a bug to you? Should the success status be automatically linked to passing the rules? – Damian Helme Dec 06 '18 at 14:27
  • Well I don't think it's a bug, because sometimes you don't want to set the success color in the first place. One might only show errors for example when user clicks the submit button. – Traxo Dec 06 '18 at 14:38

0 Answers0