如何在 Vue Composition 中使用 ref 验证表单 API
How to validate a form with ref in Vue Composition API
使用 Options API
,我验证了我的表单,如下所示:
模板:
<v-form ref="form" v-model="valid" lazy-validation @submit.prevent>
...
脚本:
methods: {
validate() {
this.$refs.form.validate();
...
}
}
现在,有了新的 Composition API
,我如何在表单上调用 validate()
?
首先,通过声明一个与模板 (1️⃣) 中使用的名称相同的 ref
来设置您的 template ref。然后,return一个validate
方法来自你的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>
Vue 2 + 组合 api :
您可以通过 context
访问该 ref,这是 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
}
}
}
使用 Options API
,我验证了我的表单,如下所示:
模板:
<v-form ref="form" v-model="valid" lazy-validation @submit.prevent>
...
脚本:
methods: {
validate() {
this.$refs.form.validate();
...
}
}
现在,有了新的 Composition API
,我如何在表单上调用 validate()
?
首先,通过声明一个与模板 (1️⃣) 中使用的名称相同的 ref
来设置您的 template ref。然后,return一个validate
方法来自你的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>
Vue 2 + 组合 api :
您可以通过 context
访问该 ref,这是 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
}
}
}