Как проверить v-текстовые поля внутри динамического массива по идентификатору индекса с помощью vuelidate - PullRequest
Новая
       20

Как проверить v-текстовые поля внутри динамического массива по идентификатору индекса с помощью vuelidate

1 голос
/ 15 апреля 2019

Я написал динамическую форму (нажатие кнопки добавления добавляет 1 текстовое поле каждый раз), и проблема в том, что, если я проверяю с помощью своей функции текстовое поле, ВСЕ одинаковые динамические текстовые поля отвечают, если я делаю ошибку в любом из их ... Например: если у меня есть 5 текстовых полей суммы, и я нажимаю на первое и оставляю это пустым, ВСЕ 5 показывают ту же ошибку ... Я хочу проверять каждый раз каждое текстовое поле по индексу с vuelidate. Это возможно ? Спасибо за ваши ответы !!! 

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