fix(core): UID doesn't exist on the component public instance in Vue 3 …

…vuelidate#1090 (vuelidate#1091) * test: 🧪 test that uid are undefined in vue3 * fix(core): 🐛 uid was undefined on vue3 create our own uid to be agnostic of vue version Co-authored-by: Florent Bouisset <[email protected]>
timowestnosto · Aug 4, 2022 · 8bdf2ac · 8bdf2ac
1 parent e002e8e
commit 8bdf2ac
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/packages/vuelidate/src/index.js b/packages/vuelidate/src/index.js
@@ -24,6 +24,9 @@ import { ComputedProxyFactory } from './utils/ComputedProxyFactory'
  * @param {GlobalConfig} [globalConfig] - Config Object
  * @return {ComputedRef<*>}
  */
+
+let uid = 0
+
 export function useVuelidate (validations, state, globalConfig = {}) {
   // if we pass only one argument, its most probably the globalConfig.
   // This use case is so parents can just collect results of child forms.
@@ -40,11 +43,8 @@ export function useVuelidate (validations, state, globalConfig = {}) {
     ? instance.$options
     : {}
   // if there is no registration name, add one.
-  if (!$registerAs && instance) {
-    // NOTE:
-    // ._uid // Vue 2.x Composition-API plugin
-    // .uid // Vue 3.0
-    const uid = instance.uid || instance._uid
+  if (!$registerAs) {
+    uid += 1
     $registerAs = `_vuelidate_${uid}`
   }
   const validationResults = ref({})

diff --git a/packages/vuelidate/test/unit/specs/validation.spec.js b/packages/vuelidate/test/unit/specs/validation.spec.js
@@ -621,6 +621,33 @@ describe('useVuelidate', () => {
     })
   })
 
+  it('collects multiple child validation giving them unique id if registerAs is omitted', async () => {
+    const { state, validations } = simpleValidation()
+    const child1 = createSimpleComponent(() => useVuelidate(validations, state))
+    const child2 = createSimpleComponent(() => useVuelidate(validations, state))
+
+    const Component = {
+      setup () {
+        const state = simpleValidation()
+        const v = useVuelidate(state.validations, state.state)
+        return { v }
+      },
+      render () {
+        return h('div', [h(child1), h(child2)])
+      }
+    }
+    const wrapper = mount(Component)
+    const uidRegex = /_vuelidate_.*/
+    const childValidation = []
+    for (const key in wrapper.vm.v) {
+      if (key.match(uidRegex)) {
+        childValidation.push(key)
+      }
+    }
+    expect(childValidation).toHaveLength(2)
+    expect(childValidation[0]).not.toEqual(childValidation[1])
+  })
+
   describe('$error', () => {
     it('returns `true` if both `$invalid` and $dirty` are true, but initially false', async () => {
       const number = ref(2)