Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/441.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何使用vuelidate通过索引id验证动态数组中的v-text-fields_Javascript_Vue.js_Vuelidate - Fatal编程技术网

Javascript 如何使用vuelidate通过索引id验证动态数组中的v-text-fields

Javascript 如何使用vuelidate通过索引id验证动态数组中的v-text-fields,javascript,vue.js,vuelidate,Javascript,Vue.js,Vuelidate,我写了一个动态表单(每次按add按钮都会添加一个文本字段),问题是,如果我用函数验证textfield,如果我在其中任何一个字段中出错,所有相同的动态textfields都会响应。。。例如:如果我有5个“金额”文本字段,单击第一个字段并将其置空,则所有5个字段都显示相同的错误。。。我想每次都用vuelidate按索引验证每个文本字段。可能吗?谢谢你的回答 <ul v-for="(records, index) in records" :key="index"> <

我写了一个动态表单(每次按add按钮都会添加一个文本字段),问题是,如果我用函数验证textfield,如果我在其中任何一个字段中出错,所有相同的动态textfields都会响应。。。例如:如果我有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以进行验证 从“vuelidate”导入{validationMixin}; 从“vuelidate/lib/validators”导入{required}; 导出默认值{ 数据(){ 返回{ 记录:[ { 金额:“ } ] }; }, 验证:{ 金额:{所需} }, 计算:{ A错误(){ 常量错误=[]; 如果(!此.$v.金额.$dirty){ 返回错误; } 如果(!此$v.金额为必填项){ //----->如果我没有在第一个文本字段中键入任何内容 //例如有5个文本字段,所有5个文本字段 //显示相同的错误…是吗 //可以在这里传递 //每个金额文本字段,以便 //验证器知道“现在确定” //我验证第一个数量文本 //数组“”的字段??? 错误。推送(“需要金额”); 返回错误; } } }