Make Vuetify v-text-field component required by default

Question

Currently, you can set rules that will work once the user changes the value of the input. For example:

Template part

<v-text-field
  v-model="title"
  label="Title"
></v-text-field>

Logic

  export default {
    data () {
      return {
        title: '',
        email: '',
        rules: {
          required: value => !!value || 'Required.'
        },
      }
    }
  }

When the user focuses and removes focus from that element, or when the user deletes all its content, the required rule is triggered.

But what happens if we want to start with the rule enabled as soon as the component is mounted or created? Is there a way to achieve this?

I searched around vuetify but I could not find info about this nor examples in my humble google searches. I will appreciate help. I'm new in vue world. Thanks.

discolor discolor · Accepted Answer · 2019-12-20T14:17:41

You could do the following:

Create a v-form and place your textfields inside the form. Don't forget to give your v-form a v-model and a ref too.
On mounted you can access the v-form via this.$refs and call .validate() just as Jesper described in his answer. In the codesandbox below you can see that the textfields immediately go red and display the "Required." text.

<v-form v-model="formValid" ref="myForm">
    <v-text-field label="Field 1" :rules="rules.required"></v-text-field>
    <v-text-field label="Field 2" :rules="rules.required"></v-text-field>
</v-form>


<script>
export default {
  data() {
    return {
      formValid: false,
      rules: {
       required: [value => !!value || "Required."]
      }
    };
  },
  mounted() {
   this.$refs.myForm.validate();
 }
};
</script>

Example:

Make Vuetify v-text-field component required by default

2 Answers