How to validate a form with ref in Vue Composition API

Question

With the Options API, I validated my form like this:

template:

<v-form ref="form" v-model="valid" lazy-validation @submit.prevent>
...

script:

methods: {
  validate() {
    this.$refs.form.validate();
    ...
  }
}

Now, with new Composition API, how I can call validate() on form?

Answer 1

First, setup your template ref by declaring a ref with the same name as used in the template (1️⃣). Then, return a validate method from your setup() (2️⃣):

<template>
  <v-form ref="myForm">...</v-form>
</template>

<script>
import { ref } from '@vue/composition-api'

export default {
  setup() {
    const myForm = ref(null)  // 1️⃣

    return {
      myForm, // 1️⃣

      validate() { // 2️⃣
        myForm.value.validate()
      },
    }
  }
}
</script>