vuejs2 - Vuejs2-使用 vee-validate 避免重复选择字段选项
问题描述
我正在使用vee-validate插件进行验证。在我的表格中,表格中有一个选择字段。行将在表中动态添加。我不想一次又一次地选择相同的 select(Description column) 选项Image。因此,我想使用 vee-validate 抛出一个错误,如“选定的描述已存在于表中”。请帮我解决这个问题。
这是我的代码:
<template>
<div>
<b-card>
<div class="panel-body" id="app">
<table class="table table-hover">
<thead>
<tr>
<th style="width: 20px;">No.</th>
<th style="width: 330px;">Description</th>
<th style="width: 130px;" class="text-right">Charges</th>
<th style="width: 130px;">Total</th>
<th style="width: 130px;"></th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in rows" :key="row.qty">
<td>
{{ index +1 }}
</td>
<td>
<select class="form-control" v-model="row.billChgDesc" v-validate="'required|check'" :name="'billChgDesc' + index" data-vv-as="Description" @change="checkRepetation">
<option v-for="option in billChgDescOpt" v-bind:value="option.value"
:key="option.value"> {{ option.text }}
</option>
</select>
<span v-show=" errors.has('billChgDesc' + index)" class="is-danger">{{ errors.first('billChgDesc' + index) }}</span>
</td>
<td>
<input class="form-control text-right" type="text" v-model="row.charges" data-type="currency" v-validate="'required'" :name="'charges' + index" data-vv-as="Charges" >
<span v-show=" errors.has('charges' + index)" class="is-danger">{{ errors.first('charges' + index) }}</span>
<td>
<input class="form-control text-right" :value="row.qty * row.charges" number readonly />
<input type="hidden" :value="row.qty * row.charges * row.tax / 100" number/>
</td>
<td>
<button class="btn btn-primary btn-sm" @click="addRow(index)"><i class="fa fa-plus"></i></button>
<button class="btn btn-danger btn-sm" @click="removeRow(index)"><i class="fa fa-minus"></i></button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" class="text-right">TOTAL</td>
<td colspan="1" class="text-right"><input class="form-control text-right" v-model="delivery" number/></td>
<td></td>
</tr>
</tfoot>
</table>
</div>
</b-card>
</div>
</template>
<script>
import Vue from 'vue'
import accounting from 'accounting'
export default {
data: function () {
return {
billChgDescOpt: [
{ value: '', text: 'Select' },
{ value: 'M', text: 'Maintenance Fee'},
{ value: 'W', text: 'Water Charges'},
{ value: 'P', text: 'Penalty Fee'},
],
rows: [
{qty: 5, billChgDesc: '', charges: 55.20, tax: 10},
{qty: 19, billChgDesc: '', charges: 1255.20, tax: 20},
],
grandtotal: 0,
delivery: 40,
selectArr:[]
}
},
methods: {
addRow: function (index) {
try {
this.rows.splice(index + 1, 0, {});
} catch(e)
{
console.log(e);
}
},
removeRow: function (index) {
this.rows.splice(index, 1);
},
checkRepetation:function(){
this.$validator.extend('check', {
getMessage: field => '* Slected ' + field + ' already exists',
validate: function(value){
selectArr.push(value);
}
})
}
}
}
</script>
<style lang="scss" scoped>
.is-danger{
color: RED;
}
</style>
提前致谢。
解决方案
您走在正确的轨道上,但需要进行一些更改。当您调用this.$validator.extend
时,只需要执行一次 - 当您的组件被创建时。它将方法附加check
到验证器,因此每次v-validate="'required|check'"
您的 HTML 中有该属性时,它都会运行该检查方法。
在您的check
验证器中,您需要回答“此值是否已被选择”的问题。答案是通过this.rows
查看它们中的任何一个是否具有相同的billChgDesc
属性。因为这是在 Vue 中,所以在验证器运行时,有问题的行已经具有该值,因此您要检查是否有多个行具有该值。所以,像这样:
mounted() {
var self = this;
this.$validator.extend('check', {
getMessage: field => '* Selected ' + field + ' already exists',
validate: function(value){
return (self.rows.filter(function(v){
return v.billChgDesc == value;
}).length <= 1);
}
});
}
true
如果只有一个项目具有给定的 ,则此验证器返回value
。我正在使用 Array 的内置filter
方法(请参阅文档)。
您可以在这里看到所有工作的示例:https ://jsfiddle.net/ryleyb/f9q50wx4/1/
推荐阅读
- java - Spring boot FF4j ff4j-spring-boot-starter 不包括 swagger doc
- powershell - 并行 Ping 多个 ip 地址并输出到 Powershell 中的多个 .TXT 文件
- python - plotly 中的 Streaming API 令牌是什么?
- android - 如何使用二维码扫描登录应用程序?
- visual-studio-code - 保存 vscode 扩展的用户首选项/设置
- node.js - 在 Express.js 上使用 Axios 向 Spotify API 发出 POST 请求时出现错误 400
- python - Python dict 更改排序 - 如何获得第一次出现?
- scrapy - Scrapy 图像管道:如何在校验和上删除图像?
- javascript - lodash 数组 _includes
- react-native - CI/CD 管道 Azure Devops