fix(validation): add validation watcher for rules

fixes #18875
vuetifyjs · Feb 10, 2025 · 5cc92b2 · 5cc92b2
1 parent 9d30fa5
commit 5cc92b2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/packages/vuetify/src/composables/__tests__/validation.spec.ts b/packages/vuetify/src/composables/__tests__/validation.spec.ts
@@ -173,4 +173,19 @@ describe('validation', () => {
 
     expect(wrapper.vm.isValid).toBe(true)
   })
+
+  it.only('should rerun validation when rules changes', async () => {
+    const wrapper = mountFunction({
+      modelValue: 'bar',
+      rules: [(v: any) => v === 'foo' || 'Invalid'],
+    })
+
+    await wrapper.vm.validate()
+
+    expect(wrapper.vm.isValid).toBe(false)
+
+    await wrapper.setProps({ rules: [(v: any) => v === 'bar' || 'Invalid'] })
+
+    expect(wrapper.vm.isValid).toBe(true)
+  })
 })
diff --git a/packages/vuetify/src/composables/validation.ts b/packages/vuetify/src/composables/validation.ts
@@ -6,7 +6,7 @@ import { useToggleScope } from '@/composables/toggleScope'
 
 // Utilities
 import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, shallowRef, unref, watch } from 'vue'
-import { getCurrentInstance, getCurrentInstanceName, getUid, propsFactory, wrapInArray } from '@/util'
+import { deepEqual, getCurrentInstance, getCurrentInstanceName, getUid, propsFactory, wrapInArray } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -176,6 +176,8 @@ export function useValidation (
     form.update?.(uid.value, isValid.value, errorMessages.value)
   })
 
+  watch(() => props.rules, () => validate())
+
   async function reset () {
     model.value = null
     await nextTick()