Question

我有几个需要验证的组件。问题在于，输入是在子组件中，而提交按钮在父组件中是这样

ParentComponent.js


   const updateEmail: UserEmailChange = {
     id: id, oldEmail: oldEmail, newEmail: newEmail
   };

   return this.http.put('http://localhost:3000/api/user/email/' + updateEmail.id, updateEmail, { headers: { 'Content-Type': 'application/json' } });

 }

ChildComponent.js

app.put('/api/user/email/:id', (req, res) =>
User.update(
  {email: req.body.oldEmail},
  {email: req.body.newEmail}
  ).then( user => {
  console.log(user);
  res.json(user);
  // res.sendStatus(200);
  })


.then( user => {
console.log(user);
res.json(user);
// res.sendStatus(200);
}).catch(err => console.log(err)));

我在这里做什么错了？

Answer 1

幸运的是，有一种在父子组件之间共享验证器作用域的模式！您可以inject将验证器从父级添加到子级，以便他们使用相同的实例。这意味着您可以使用this.$validator.validate()

验证来自父级的子级输入

文档： http://vee-validate.logaretm.com/v2/concepts/injections.html

Answer 2

您可以在子组件上使用引用，然后在调用someSubmitFunction时尝试对该引用进行验证

类似这样的东西：

  const isValid = await this.$refs.childref.validate()

如何在亲子关系中使用vee-validate

2 个答案: