vue.js - 如何在 Vue Composition API 中使用 ref 验证表单

Question

使用Options API，我验证了我的表单，如下所示：

模板：

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

脚本：

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

现在，使用 new Composition API，我如何调用validate()表单？

标签： vue.jsvuetify.jsvuejs3vue-composition-api

Answer 1

首先，通过声明与模板中使用的名称相同的 a 来设置模板引用(1️⃣)。ref然后，从您的(2️⃣)返回一个validate方法：setup()

<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>