Vue.js 将Vuelidate与v-for和道具一起使用
您如何将Vuelidate与Vue.js 将Vuelidate与v-for和道具一起使用,vue.js,vuetify.js,vuelidate,Vue.js,Vuetify.js,Vuelidate,您如何将Vuelidate与v-for一起使用。我似乎无法使它正常工作。它要么验证我表单中的每个文本字段,要么抛出一个错误。我只希望它验证正在输入的字段,而不是从v-for创建的其他字段 在下面的模板中,您可以看到amazonCredsArray中的cred是从父组件传入的道具。创建的表单数量取决于amazonCredsArray中的哈希数。使用下面的设置,将多次创建下面的文本字段,仅输入1时,Vuelidate将验证所有这些字段。我在字段中定义了:key,但它没有帮助 模板 <templ
v-for
一起使用。我似乎无法使它正常工作。它要么验证我表单中的每个文本字段
,要么抛出一个错误。我只希望它验证正在输入的字段,而不是从v-for
创建的其他字段
在下面的模板中,您可以看到amazonCredsArray
中的cred
是从父组件传入的道具。创建的表单数量取决于amazonCredsArray
中的哈希数。使用下面的设置,将多次创建下面的文本字段
,仅输入1时,Vuelidate将验证所有这些字段。我在字段中定义了:key
,但它没有帮助
模板
<template>
<v-container fluid grid-list-lg class="come_closer">
<v-layout row wrap>
<v-flex xs12 v-for="creds in amazonCredsArray" :key="creds.id" class="pb-4">
<v-card class="lightpurple">
<v-card-title>
<v-icon class="my_dark_purple_text">language</v-icon>
<h1 class="title oswald my_dark_purple_text pl-2 pr-5">ENTER YOUR AMAZON CREDENTIALS BELOW</h1>
</v-card-title>
<v-form>
<v-layout xs12 row wrap class="mx-auto" >
<v-flex xs12>
<v-text-field
:error-messages="sellerIdErrors"
required
:key="creds.seller_id"
color="indigo"
label="Amazon Seller Id"
v-model="creds.seller_id"
prepend-icon="person"
@input="$v.seller_id.$touch()"
@blur="$v.seller_id.$touch()"
></v-text-field>
</v-flex>
你是怎么解决的?我也想知道!我还没有弄清楚这将如何/是否会奏效!
import { validationMixin } from 'vuelidate';
import { required } from 'vuelidate/lib/validators';
var url = "https://bc-only-rates-trimakas.c9users.io";
export default {
mixins: [validationMixin],
validations: {
seller_id: { required }
},
props: ["amazonCredsArray"],
computed:{
sellerIdErrors () {
const errors = []
if (!this.$v.seller_id.$dirty) return errors
!this.$v.seller_id.checked && errors.push('Please provide us your seller id')
return errors
},
},