Javascript 如何使用vuelidate通过索引id验证动态数组中的v-text-fields
我写了一个动态表单(每次按add按钮都会添加一个文本字段),问题是,如果我用函数验证textfield,如果我在其中任何一个字段中出错,所有相同的动态textfields都会响应。。。例如:如果我有5个“金额”文本字段,单击第一个字段并将其置空,则所有5个字段都显示相同的错误。。。我想每次都用vuelidate按索引验证每个文本字段。可能吗?谢谢你的回答Javascript 如何使用vuelidate通过索引id验证动态数组中的v-text-fields,javascript,vue.js,vuelidate,Javascript,Vue.js,Vuelidate,我写了一个动态表单(每次按add按钮都会添加一个文本字段),问题是,如果我用函数验证textfield,如果我在其中任何一个字段中出错,所有相同的动态textfields都会响应。。。例如:如果我有5个“金额”文本字段,单击第一个字段并将其置空,则所有5个字段都显示相同的错误。。。我想每次都用vuelidate按索引验证每个文本字段。可能吗?谢谢你的回答 <ul v-for="(records, index) in records" :key="index"> <
<ul v-for="(records, index) in records" :key="index">
<!-- After each add button press, this textfield gonna be added into the form -->
<td>
<v-text-field
v-model="records.amount"
:error-messages="amountErrors"
:counter="5"
label="Amount"
required
@input="$v.amount.$touch()"
@blur="$v.amount.$touch()"
></v-text-field>
</td>
</ul>
<script>
// importing vuelidate for validation
import { validationMixin } from "vuelidate";
import { required } from "vuelidate/lib/validators";
export default {
data() {
return {
records: [
{
amount: ""
}
]
};
},
validations: {
amount: { required }
},
computed: {
amountErrors() {
const errors = [];
if (!this.$v.amount.$dirty) {
return errors;
}
if (!this.$v.amount.required) {
// -----> if i don't type anything in the first text field
// and have for example 5 textfields, ALL 5 textfield
// display the same error ... is it
// possible to pass here the INDEX of
// each amount text field, so that
// the validator knows that "ok now
// i validate the first amount text
// field of the array" ???
errors.push("Amount is required");
return errors;
}
}
}
</script>
//导入vuelidate以进行验证
从“vuelidate”导入{validationMixin};
从“vuelidate/lib/validators”导入{required};
导出默认值{
数据(){
返回{
记录:[
{
金额:“
}
]
};
},
验证:{
金额:{所需}
},
计算:{
A错误(){
常量错误=[];
如果(!此.$v.金额.$dirty){
返回错误;
}
如果(!此$v.金额为必填项){
//----->如果我没有在第一个文本字段中键入任何内容
//例如有5个文本字段,所有5个文本字段
//显示相同的错误…是吗
//可以在这里传递
//每个金额文本字段,以便
//验证器知道“现在确定”
//我验证第一个数量文本
//数组“”的字段???
错误。推送(“需要金额”);
返回错误;
}
}
}