vue.js - 将 Vuelidate 与 v-for 和 props 一起使用
问题描述
你们都如何使用 Vuelidate 和v-for
. 我似乎无法让它正常工作。它要么验证text-fields
我的表单中的每一个,要么引发错误。我只希望它验证正在输入的字段,而不是从v-for
.
在下面的模板中,您可以看到creds
inamazonCredsArray
是从父组件传入的道具。取决于其中的散列amazonCredsArray
数是创建的表单数。使用下面的设置,text-field
下面会被多次创建,当只输入 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
},
},
解决方案
推荐阅读
- java - Firebase Cloud Firestore 引用返回 null
- python - 如何将生成的图像保存到 python 中的不同文件夹中?
- jenkins - 在 Jenkins 中访问 Blackduck REST API 的 SAML 身份验证
- ios - 如何使用正确的自动换行将 NSAttributedString 拆分为相等的边界视图
- python - 同一台计算机上不同版本的 Python 不会导入相同的模块
- python - 使用 Python 从多个 CSV 文件中删除行
- reactjs - 反应:仅将主体类添加到 useEffect 挂钩中的某些组件?
- npm - 未捕获的错误:包含模块“zlib”时找不到
- arduino - Arduino memcpy 扭曲串行输出
- elasticsearch - 社交媒体仪表板