【Vue】动态表单提交时验证出错，如何处理this.$refs[name].validate is not a function？

• Z时代
• 2024-01-10
• 分类：技术分享

想要利用iview form组件自带的验证功能，可是点击提交时一直验证不了，提示Uncaught TypeError: this.$refs[name].validate is not a function，查了资料还是没有解决不了！
附上代码：
<div class="info">

<!-- <Form ref="pageData" :model="pageData" :label-width="120"> -->
<div v-for="(formdata,i) in pageData" :key="formdata.pageId">
<h3><span>{{formdata.pageName}}</span></h3>
<Form ref="formdata" :model="formdata" :label-width="120">
<Row>
<Col v-for="(item,index) in formdata.details" :span="24/item.col">
<template v-if="item.type === 'input'">
<Form-item :label="item.name"  :prop="'details.' + index + '.value'" :rules="{required: true,message:'not empty',trigger:'blur'}">
<Input v-model="item.value" :placeholder="item.placeholder" ></Input>
</Form-item>
</template>
</Col>
</Row>
</Form>
</div>
<!-- </Form> -->
<Button type="primary" @click="submit('formdata')" size="large">Submit</Button>

</div>
数据如下:

pageData:[{
"details": [
{
"col": "2",
"type": "input",
"name": "所属学校",
"placeholder": "请获取信息",
"text": "school",
"value": ""
}],
"pageId": 1,
"pageName": "基本表单1"
},{
"details": [
{
"col": "3",
"type": "input",
"name": "学生证号",
"placeholder": "请获取信息",
"text": "id_num",
"value": ""
}],
"pageId": 2,
"pageName": "基本表单2"
}]

方法：

submit (name) {
alert(name)
this.$refs[name].validate((valid) => {
alert(2)
if (valid) {
this.$Message.success('提交成功!');
} else {
this.$Message.error('表单验证失败!');
}
});
}

页面效果：

错误信息：

希望有深入理解iview表单验证机制的同学来帮忙解答下，万分感谢！

回答

你能打印出this.$refs[name]么?

另外，你这个 <Form ref="formdata" :model="formdata" :label-width="120">
Form组件，最好不要放到遍历里面，不然ref里的 formdata 是谁的 都不知道。

或者改成 <Form ref='"formdata"+i' :model="formdata" :label-width="120">

其实你这个没必要 去生成两个表单。而且一个 submit 只能提交一个表单。

建议你重新把这个写一遍，最起码代码要看着就清晰明了，先一点点的去实现功能，不要一下子都写出来，不然找错误也不好找~

 this.$refs.formdata[0].validate()

以上是 【Vue】动态表单提交时验证出错，如何处理this.$refs[name].validate is not a function？ 的全部内容， 来源链接： utcz.com/a/82358.html