如何在 Vue Composition API 中使用 ref 验证表单答案

【问题标题】：How to validate a form with ref in Vue Composition API如何在 Vue Composition API 中使用 ref 验证表单
【发布时间】：2020-11-26 05:26:47
【问题描述】：

使用Options API，我像这样验证了我的表单：

模板：

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

脚本：

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

现在，有了新的Composition API，我如何在表单上调用validate()？

【问题讨论】：

标签： vue.js vuetify.js vuejs3 vue-composition-api

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

Vue 2 + 组合 API：

您可以通过context 访问该引用，这是setup 函数的第二个参数：

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

脚本：

export default {
  setup(props,context) {
    functions validate() { 
       context.refs.form.validate()
      }

    return {
       validate
    }
  }
}

或破坏参数内的上下文：


export default {
  setup(props,{refs}) {
    functions validate() { 
      refs.form.validate()
      }

    return {
       validate
    }
  }
}

【讨论】：