javascript - vue-validator 在 v-for 中应用遇到的几个问题，求解惑
本文介绍了javascript - vue-validator 在 v-for 中应用遇到的几个问题，求解惑的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
首先介绍一下需求：点击‘新增参数’按钮新增一行参数列表，填写参数值后满足验证要求则可以保存和新增参数列表。保存后保存按钮变为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的报错：
新建了几个数据
删除第一个数据后有报错
第三行数据使用的是第二行数据的验证了
解决方案
先說找到個錯誤：
<!-- <pre>{{ $inputParaVali | json }}</pre> -->
</validator>
</form>
</li>
<li> <---- 這個是多的，會導致後面元素出問題的然後研究下了 vue-validator 發現，<validator> 是 elementDirective，並且其 groups 參數是不支持動態改變，只會處理初始化時傳進去的值(也就是第一次跑時)，所以我認為比較好的解決辦法應該是把把行數據都用 <validator> 包起來各自獨立。
實現：jsFiddle
这篇关于javascript - vue-validator 在 v-for 中应用遇到的几个问题，求解惑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
