2

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

0 回答 0