element动态增减表单的验证，触发不了验证规则，请问问题出在哪了？谢谢。

Question

template代码：

<el-form ref="form" :model="form" :rules="rules">
   <div :key="index" v-for="(item,index) in form.vlan_id">
      <el-form-item :props="`vlan_id.${index}.value`" :rules="rules.vlan_id">
        <el-input v-model="item.value" placeholder="请输入内容" class="input-Vlan"></el-input>
        <i v-if="form.vlan_id.length<5" class="el-icon-plus icon-class" @click="addItem"></i>
        <i v-if="form.vlan_id.length>1" class="el-icon-minus icon-class" @click="minusItem(index)" ></i>
      </el-form-item>
    </div>
</el-form>
        

script部分：

 data(){
  let that=this;
  let validateVlan = (rule, value, callback) => {
    if (that.form.vlan_id[index].value.trim() != null && that.form.vlan_id[index].value.trim() != "") {
        ......
    }
  }
  return{
    value:true,
    valueSelect:'Trunk',
    form:{
      vlan_id: [],
    },
    rules:{
      vlan_id:[
        {required: true, message: '不能为空', trigger: ['blur', 'change']},
        { validator: validateVlan, trigger: ['blur', 'change']}
      ]
    }
  }
},
methods:{
  //新增id
  addItem () {
    this.form.vlan_id.push({ value: ''})
  },
  //减少id
  minusItem (item) {
    var index = this.form.vlan_id.indexOf(item)
    if (index !== -1) {
      this.form.vlan_id.splice(index, 1)
    }
  },
},
  

Answer 1

提问后又仔细找了下问题，动态项里面prop而非props，多写个s，
<el-form-item :prop="vlan_id.${index}.value" :rules="rules.vlan_id">
改了后就Ok了（新手到处踩坑）。表单动态加减的验证，留问题以供参考。

Answer 2

问题：el-form-item这个rules和el-form的rules上面的重复了；

1.如果你要用el-form这个rules，接收的是一个对象，对象内部的key值需要和el-form-item上的每一个props的名称一一对应，不然不会生效的；

<el-form ref="form" :model="form" :rules="rules">

2.其他代码不变，只保留el-form-item这个rules，删掉el-form这个rules就可以校验了。