vue-validator 在 v-for 中应用遇到的几个问题，求解惑

Question

首先介绍一下需求：点击‘新增参数’按钮新增一行参数列表，填写参数值后满足验证要求则可以保存和新增参数列表。保存后保存按钮变为disabled，待该行参数值被改变并符合验证要求后重新激活保存按钮。在这过程中需要动态改变许多参数，比如字段名，分组名，虽然解决了一些但还是遇到了几个问题，如下：
1、我希望<validator>里面的groups可以随着v-for里面inputParams长度的增加而自动增加，一开始我加了个validatorGroups，想和groups绑定，但是不生效，就只好先写死了，但这只是权宜之计，有什么好办法吗？
2、删除掉一行参数后，下一行的validator对象好像也被删除了，只有刷新后才会恢复正常，有什么好的办法吗？

新建了三个参数：

将key3删除后影响到了key2的验证：

<template>
  <layout>
    <div slot='content'>
      <div class="uk-block">
        <ul id="IOTabs" class="uk-switcher">
          <li class="uk-active">
              <div class="uk-clearfix">
                <span>共{{inputParams.length}}条数据</span>
                <button class="uk-button uk-button-success uk-float-right" :disabled="!allowAddParam" @click="addParam">新增参数</button>
              </div>
              <form action="" class="uk-form uk-margin-top">
                <validator name="inputParaVali" :groups="['group0','group1','group2','group3']">
                  <table class="uk-table">
                    <thead>
                      <tr>
                        <th>参数key</th>
                        <th>参数中文描述</th>
                        <th>参数类型</th>
                        <th>value</th>
                        <th>value边界</th>
                        <th>默认值</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody>
                      <template v-for="param in inputParams" >
                        <tr>
                          <td><input type="text" :field="'key'+$index" :group="'group'+$index" v-model="param.key.temValue" placeholder="" :class="($inputParaVali['key'+$index] && $inputParaVali['key'+$index].valid) ? '':'uk-form-danger'" v-validate="{required:true}" initial="on"></td>
                          <td><input type="text" :field="'desc'+$index" :group="'group'+$index" v-model='param.desc.temValue' :class="($inputParaVali['desc'+$index] && $inputParaVali['desc'+$index].valid) ? '':'uk-form-danger'" v-validate="{required:true}" initial="on"></td>
                          <td><v-select :id='$index' :options="paramTypeOptions" :selected="param.type.temValue" :searchable="false" :show-labels="false" @update="updateParamType" key="id" label="name" :disabled="param.id?true:false"></v-select></td>
                          <td><input type="text" v-model='param.value.temValue' disabled="disabled"></td>
                          <td><input type="text" :field="'valueboundary'+$index" :group="'group'+$index" v-model='param.valueBoundary.temValue' :class="($inputParaVali['valueboundary'+$index] && $inputParaVali['valueboundary'+$index].valid) ? '':'uk-form-danger'" v-validate="{required:true}" :disabled="param.type.temValue.id==1?false:true"></td>
                          <td><input type="text" :field="'defaultvalue'+$index" :group="'group'+$index" v-model='param.defaultValue.temValue' :class="($inputParaVali['defaultvalue'+$index] && $inputParaVali['defaultvalue'+$index].valid) ? '':'uk-form-danger'" v-validate="{required:true}" :disabled="param.type.temValue.id==1?false:true"></td>
                          <td>
                            <button type="button" class="uk-button uk-button-success" :data-index="$index" :disabled="!$inputParaVali['group'+$index].modified||$inputParaVali['group'+$index].invalid" @click='saveParam'>保存</button>
                            <button type="button" v-show="$inputParaVali['group'+$index].modified" :data-index="$index" class="uk-button uk-button-success uk-margin-small-left"  @click='cancelEdit'>取消</button>
                            <button type="button" v-show="!$inputParaVali['group'+$index].modified" :data-index="$index" class="uk-button uk-button-success uk-margin-small-left" @click='deleteParam'>删除</button>
                            {{$index | json }}
                          </td>
                        </tr>
                        <tr>
                          <td>{{ $inputParaVali['key'+$index] | json }}</td>
                          <td>{{ $inputParaVali['desc'+$index] | json }}</td>
                          <td></td>
                          <td></td>
                          <td>{{ $inputParaVali['valueboundary'+$index] | json }}</td>
                          <td>{{ $inputParaVali['defaultvalue'+$index] | json }}</td>
                          <td></td>
                        </tr>
                        <tr><td colspan="7">{{ $inputParaVali['group'+$index] | json }}</td></tr>
                      </template>
                    </tbody>
                  </table>
                <!-- <pre>{{ $inputParaVali | json }}</pre> -->
                </validator>
              </form>
          </li>
          <li>
        </ul>
      </div>
    </div>

  </layout>
</template>
<script>
import 'VALIDATOR'
import layout from './../Layout'
import vSelect from 'COMPONENT/MultiSelect'
import responseCheck from 'UTILS/response'
import notify from 'UTILS/notify'
import systemService from 'SERVICE/SystemService'
import algorithmService from 'SERVICE/AlgorithmService'

export default {
  components: {
    layout,
    vSelect
  },
  data() {
    return {
      allowAddParam:true,
      paramTypeOptions:[],
      validatorGroupIndex:0,
      validatorGroups:[],
      inputParams:[],
      outputType:{
      },
      inputFile:{
        supportVideo:true,
        supportImg:true,
        file:{
          id:'',
          value:'',
          name:'',
          failed:false
        }
      }
    }
  },
  methods: {
    addParam(){
      this.allowAddParam=false
      this.inputParams.push({
        id:'',
        key:{
          temValue:'',
          value:''
        },
        desc:{
          temValue:'',
          value:''
        },
        type:{
          temValue:this.paramTypeOptions[0] || null,
          value:this.paramTypeOptions[0] || null
        },
        value:{
          temValue:'""',
          value:'""'
        },
        valueBoundary:{
          temValue:'/',
          value:'/'
        },
        defaultValue:{
          temValue:'/',
          value:'/'
        }
      })
      this.validatorGroups.push('group'+this.validatorGroupIndex)
      this.validatorGroupIndex++
    },
    async updateParamType(value, id){
      let params = this.inputParams[id]
      params.type.temValue = value
    },
    async saveParam(e){
      this.allowAddParam=true
      let index = parseInt(e.target.dataset.index)
      let params = this.inputParams[index]
      params.key.value=params.key.temValue
      params.desc.value=params.desc.temValue
      params.type.value=params.type.temValue
      params.valueBoundary.value=params.valueBoundary.temValue
      params.defaultValue.value=params.defaultValue.temValue
      let msg = {
        algo_id:this.$route.params.id,
        name:params.key.value,
        name_cn:params.desc.value,
        param_type:params.type.value.id,
        valid_detail:params.valueBoundary.value,
        default:params.defaultValue.value
      }
      if(params.id){
        msg.id = params.id
        let res = await algorithmService.updateInputParams(msg)
        if (responseCheck(res)) {
          notify('修改成功', {
            status: 'success'
          })
        }
      }else{
        let res = await algorithmService.createInputParams(msg)
        if (responseCheck(res)) {
          params.id = res.data[index].id
          notify('添加成功', {
            status: 'success'
          })
        }
      }
      this.$resetValidation()
    },
    cancelEdit(e){
      this.allowAddParam=true
      let index = parseInt(e.target.dataset.index)
      let params = this.inputParams[index]
      params.key.temValue=params.key.value
      params.desc.temValue=params.desc.value
      params.type.temValue=params.type.value
      params.valueBoundary.temValue=params.valueBoundary.value
      params.defaultValue.temValue=params.defaultValue.value
    },
    async deleteParam(e){
      this.allowAddParam=true
      let index = parseInt(e.target.dataset.index)
      let params = this.inputParams[index]
      if(params.id){
        let msg = {
          id:params.id,
          algo_id:this.$route.params.id,
          param_type:params.type.value.id
        }
        let res = await algorithmService.deleteInputParams(msg)
        if (responseCheck(res)) {
          this.inputParams.splice(index,1)
          notify('删除成功', {
            status: 'success'
          })
        }
      }else{
        this.inputParams.splice(index,1)
      }
      //location.reload();
      this.$forceUpdate()
    },
    getSelectedObj(key,queriedArr,keyName='id'){
      for(let obj of queriedArr){
        if(obj[keyName] == key){
          return obj
        }
      }
    }
  },
  async created() { 
    this.paramTypeOptions = await systemService.sysOption('algo-config-type')
    let inputParamsRes = await algorithmService.getInputParams(this.$route.params.id)
    for (let param of inputParamsRes.data) {
      let param_type = this.getSelectedObj(param.param_type, this.paramTypeOptions)
      this.inputParams.push({
        id:param.id,
        key:{
          temValue:param.name,
          value:param.name
        },
        desc:{
          temValue:param.name_cn,
          value:param.name_cn
        },
        type:{
          temValue:param_type,
          value:param_type
        },
        value:{
          temValue:param.valid_rule,
          value:param.valid_rule
        },
        valueBoundary:{
          temValue:param.valid_detail || '/',
          value:param.valid_detail || '/'
        },
        defaultValue:{
          temValue:param.default || '/',
          value:param.default || '/'
        }
      })
      this.validatorGroups.push('group'+this.validatorGroupIndex)
      this.validatorGroupIndex++
    }
  }
}
</script>

关于测试demo的报错：
新建了几个数据

删除第一个数据后有报错

第三行数据使用的是第二行数据的验证了

Answer 1

先說找到個錯誤：

        <!-- <pre>{{ $inputParaVali | json }}</pre> -->
        </validator>
      </form>
  </li>
  <li> <---- 這個是多的，會導致後面元素出問題的

然後研究下了 vue-validator 發現，<validator> 是 elementDirective，並且其 groups 參數是不支持動態改變，只會處理初始化時傳進去的值(也就是第一次跑時)，所以我認為比較好的解決辦法應該是把把行數據都用 <validator> 包起來各自獨立。

實現：jsFiddle