v-validate 不适用于动态生成的字段 vue.js

Posted 2023-02-16

【中文标题】v-validate 不适用于动态生成的字段 vue.js

【英文标题】：v-validate not working on dynamic generated fields vue.js

【发布时间】：2020-12-04 23:52:06

【问题描述】：

我正在尝试使用 v-validate 验证动态字段，但它适用于非动态字段，但相同的代码不适用于动态生成的字段：

 <div v-if="condition=='true'> 
         <input :name="user.name" class="form-control input-md" type="text" :v-model="user.user_value" :v-validate="'required'" :class="['form-control', 'is-invalid': errors.has(user.name)]"/>
                                <div :v-show="errors.has(user.name)" class="invalid-feedback">
                                         errors.first(user.name) 
                                </div>
    </div>


export default 
  data() 
    return 
      user: ,
      form: new Form(
        contact: "",
      ),
    ;
  ,
  methods: 
 getvalues() 

  axios.get(APP_URL + `/api/get-values?Id=$id`,  headers: header )
        .then((response) => 

  for (var i = 0;i < response.data.list[0].student.length; i++) 
        var id = response.data.list[0].student[i].id;
        var name = response.data.list[0].student[i].name;
  



    this.form.user.push(
                id: id,
                name: name,
                user_value: "",
              );

 
   ,

【问题讨论】：

你必须使用v-if，因为它不是在html中呈现的。

@Danizavtz：我有一个外部 div，我使用了 v-if，更新了问题中的代码，请检查，我的主要问题是验证动态字段。

您使用的是哪个版本的 v-validate？

@Danizavtz 的样子，他用v2.*.*

您正在绑定 :name 和 :v-model。具有不同的字段。

【参考方案1】：

你应该升级到 vee-validate v3，它更好用而且更小

无论如何，我认为您需要做的是向输入添加一个关键属性

从 vee-validate v2 中查找此示例：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>

See docs for more details

【讨论】：

感谢您的回答，请检查我已为上述问题添加了更多详细信息，实际上我想验证动态字段但 vee-validate 不适用于我认为的动态字段，我可以提交没有价值的形式

@user3653474 我检查了新代码你没有向输入字段添加键属性，请添加它然后尝试它是否有效并告诉我结果

我在用户内部获取它，在 for 循环中我正在渲染这个输入字段，我的字段被正确渲染，唯一的问题是验证动态输入字段