element-ui 动态增减表单项 表单验证

Question

<el-form-item
    v-for="(domain, index) in dynamicValidateForm.domains"
    :label="'域名' + index"
    :key="domain.key"
    :prop="'domains.' + index + '.value'"
    :rules="{
      required: true, message: '域名不能为空', trigger: 'blur'
    }"
  >
    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
  </el-form-item>

疑惑的地方：

:prop="'domains.' + index + '.value'"

为什么prop中是'domains.+index+.value'而不是'dynamicValidateForm.domains+index+.value'或者'domain.value'?

示例，请分别运行三段注释

Answer 1

个人理解，
官网说的prop  传入 Form 组件的 model 中的字段   string类型

组件应该会通过  <el-form :model="dynamicValidateForm">  这里面去找，
所以'dynamicValidateForm.domains.'+index+'.value' 这个是你拼出来的字符串
从 dynamicValidateForm.dynamicValidateForm.domains[0].value  肯定找不到
 
domain.value  是 ''   更找不到这个 model字段了。


:prop='`domains[${index}].value`'

但是从dynamicValidateForm.domains[0].value  就可以找到了。

Answer 2

为什么没人回答，，，，

Answer 3

这个地方我也好纠结，我理解：prop指定的数据应该和v-model里的是一致的，因为要判断嘛，但是我今天折腾了一天还是没搞定 哎