Использование Vuelidate с v-for и реквизитом - PullRequest
Новая
       20

Использование Vuelidate с v-for и реквизитом

0 голосов
/ 14 ноября 2018

Как вы все используете Vuelidate с v-for. Я не могу заставить его работать правильно. Он либо проверяет каждый из text-fields в моей форме, либо выдает ошибку. Я только хочу, чтобы он проверял поле, которое вводится, а не другие поля, созданные из v-for.

В приведенном ниже шаблоне вы можете видеть creds in amazonCredsArray - реквизиты, передаваемые из родительского компонента. В зависимости от количества хэшей в amazonCredsArray указывается количество создаваемых форм. При настройке ниже, text-field ниже создается несколько раз, и Vuelidate проверяет ВСЕ эти поля, когда вводится только 1. У меня :key определено на поле, но это не помогает.

Template 

<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
    },
  },
...