VUE 3 Vuelidate - 组件验证之间的冲突答案

【问题标题】：VUE 3 Vuelidate - conflicts between components validationVUE 3 Vuelidate - 组件验证之间的冲突
【发布时间】：2021-03-10 23:42:09
【问题描述】：

我对 VUE 3 Vuelidate 有疑问。我有 2 个组件（使用模式制作的 CRUD 功能列表）。每个组件都使用 Vuelidate 进行验证。如果我去第一个列表，打开模态（带有验证的输入），然后路由到第二个列表并打开模态，我得到如下错误：

Uncaught TypeError: Cannot convert undefined or null to object
at Function.keys (<anonymous>)
at sortValidations (index.esm.js:88)
at setValidations (index.esm.js:494)
at index.esm.js:694
at ComputedRefImpl.reactiveEffect [as effect] (reactivity.esm-bundler.js:42)
at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js:819)
at Proxy.options.computed.$v (index.esm.js:700)
at ComputedRefImpl.reactiveEffect [as effect] (reactivity.esm-bundler.js:42)
at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js:819)
at Object.get [as $v] (runtime-core.esm-bundler.js:5611)

我的 2 个组件看起来像最简单的 Vuelidate 示例，其结构如下：

<script>
export default {
data(){ },
validations() { }
}
</script>

当我在 setValidations() 设置断点时，我看到验证模型是空的。我的第二个组件的验证似乎不是新创建的，而是取自前一个组件。可能吗？提前致谢。

编辑：我看到有“VuelidateMixin”选项，它“通过 mixin 将所有 Vuelidate 功能应用于专用组件”。但它在我的场景中不起作用。

【问题讨论】：

标签： javascript vue.js vuejs3 vuelidate

【解决方案1】：

好像语法错误。

<script>
export default {
  data() {
    return {
      ...
    }
  },
  validations: {
    ...
  }
}
</script>

【讨论】：