Question

我写了一个动态表单（每次按下添加按钮都会添加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>

如何通过带有vuelidate的索引ID验证动态数组中的v-text-fields

0 个答案: