求解 element ui 框架这种数据格式下该如何对 input 进行验证
juventusryp · 2022-05-13 15:34:06 +08:00 · 1077 次点击这是一个创建于 706 天前的主题，其中的信息可能已经有所发展或是发生改变。
问题：
- 想对 el-input 中的值进行验证，el-form-item 中的 prop 该怎么写才能正确验证呢？
代码：
<template>
<el-form :model="examInfo" label-width="100px" class="demo-dynamic">
<div
v-for="(item, index) in examInfo"
:key="index"
>
<el-form-item
v-for="(t, x) in item"
:key="t + x"
:label="'name' + x"
:prop=""
:rules="[
{
required: true, message: '不能为空', trigger: 'blur'
},
{ type: 'number', message: '必须为数字'}
]"
>
<el-input v-model.number="t.questionTitle" />
</el-form-item>
</div>
</el-form>
</template>
<script>
export default {
data() {
return {
examInfo: {
'simple': [
{
'questionTitle': ''
},
{
'questionTitle': ''
}
],
'discuss': [
{
'questionTitle': ''
},
{
'questionTitle': ''
}
]
}
}
},
methods: {
}
}
</script>
 |
1
canbingzt 2022-05-13 16:49:10 +08:00
prop="`examInfo[${index}].questionTitle`"
|
|
2
canbingzt 2022-05-13 16:50:30 +08:00
不行的话试试
prop="`examInfo[${index}]`" |
 |
3
zj9495 2022-05-13 16:53:37 +08:00
|
 |
4
juventusryp OP @canbingzt 两种都已经试过了，不行
|
|
5
juventusryp OP @zj9495 看了这个了，官方给的数据结构是对象里面只有一个数组对象，我这里是两个甚至更多的数组对象，所以不知道怎么写了
|
|
6
juventusryp OP 网上能查的方法都查了，如果这么写：
:prop="`simple.${x}.questionTitle`" 那么是可以验证对应的 item 的，但是我这里的数据是后端传过来，不确定数量的数组对象，所以特来求教各位 v 友 |
|
7
zj9495 2022-05-13 17:43:59 +08:00
:prop="`${index}.${x}.questionTitle`"
试试这个 |
|
8
juventusryp OP @zj9495 太感谢了，这样可以，折腾了几天
但是不明白原理是什么呢，官方给的解释是 prop 要传入 form 组件的 model 字段，这里为什么第一个是 index ？ |
 |
9
xingyue 2022-05-14 10:17:28 +08:00 via Android
@juventusryp (item, index) in examInfo 这一步你遍历的是对象，参数是(value,key,index) in object
|
Select Language