[Vuejs]-Vue, vuetify: How to validate input immediately after creating, adding it

by

4👍

✅

You can put your template’s code, where you use v-for directive, between v-form tags:

<v-form ref="form">
  <div v-for="(message, index) in messages" :key="index">
    <v-text-field v-model="messages[index]"
      :rules="[v => !!v || 'Error: Please enter text']" />
  </div>

  <v-btn @click="add()">Add input</v-btn>
</v-form>

and then inside add() method validate form by using built-in validate() function in v-form reference

async add(val) {
  this.messages.push(val);
  await this.$nextTick(); // wait until a new text-field will be rendered
  this.$refs.form.validate(); //validate form
},

An example on CodePen is here

👤TymoteuszLao

1👍

To achieve this you can use this.$refs.form.validate(). Wrap your inputs inside <v-form> tag and add an attribute ref="form".

Live Demo :

new Vue({
  vuetify: new Vuetify(),
  data: {
    messages: ['Hi', 'Hello']
  },
  methods: {
    required: value => !!value || 'Please enter text',
    add(val) {
            this.messages.push(val);
            setTimeout(() => {
              this.$refs.form.validate();
            })
        }
  }
}).$mount('#app')
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css"/>
<div id="app">
  <v-app>
    <v-form ref="form">
      <div v-for="(message, index) in messages" :key="index">
        <v-text-field v-model="messages[index]" :rules="[required]"/>
      </div>
      <v-btn @click="add()">Add input</v-btn>
    </v-form>
  </v-app>
</div>
👤Debug Diva

Leave a comment