feat(useVModel): add shouldEmit hook (#2836)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
vueuse · Mar 23, 2023 · f8a5328 · f8a5328
1 parent f4d3542
commit f8a5328
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 2 deletions.
diff --git a/packages/core/useVModel/index.test.ts b/packages/core/useVModel/index.test.ts
@@ -229,4 +229,40 @@ describe('useVModel', () => {
       child: { age: 2 },
     })
   })
+
+  it('should trigger beforeEmit', async () => {
+    const emitMock = vitest.fn()
+    const beforeEmitMock = vitest.fn()
+    let res = ''
+    const beforeEmit = (value: string) => {
+      res = value
+      beforeEmitMock()
+      return true
+    }
+    const data = useVModel(defaultProps(), undefined, emitMock, { shouldEmit: beforeEmit })
+    data.value = 'changed'
+
+    expect(emitMock).toHaveBeenCalledWith(isVue2 ? 'input' : 'update:modelValue', 'changed')
+    expect(beforeEmitMock).toHaveBeenCalled()
+    await nextTick()
+    expect(res).toBe('changed')
+  })
+
+  it('should not  trigger beforeEmit (return false)', async () => {
+    const emitMock = vitest.fn()
+    const beforeEmitMock = vitest.fn()
+    let res = ''
+    const beforeEmit = (value: string) => {
+      res = value
+      beforeEmitMock()
+      return false
+    }
+    const data = useVModel(defaultProps(), undefined, emitMock, { shouldEmit: beforeEmit })
+    data.value = 'changed'
+
+    expect(emitMock).not.toHaveBeenCalled()
+    expect(beforeEmitMock).toHaveBeenCalled()
+    await nextTick()
+    expect(res).toBe('changed')
+  })
 })
diff --git a/packages/core/useVModel/index.ts b/packages/core/useVModel/index.ts
@@ -39,6 +39,13 @@ export interface UseVModelOptions<T> {
    * @default false
    */
   clone?: boolean | CloneFn<T>
+  /**
+   * The hook before triggering the emit event can be used for form validation.
+   * if false is returned, the emit event will not be triggered.
+   *
+   * @default undefined
+   */
+  shouldEmit?: (v: T) => boolean
 }
 
 /**
@@ -61,6 +68,7 @@ export function useVModel<P extends object, K extends keyof P, Name extends stri
     eventName,
     deep = false,
     defaultValue,
+    shouldEmit,
   } = options
 
   const vm = getCurrentInstance()
@@ -92,6 +100,16 @@ export function useVModel<P extends object, K extends keyof P, Name extends stri
     ? cloneFn(props[key!])
     : defaultValue
 
+  const triggerEmit = (value: P[K]) => {
+    if (shouldEmit) {
+      if (shouldEmit(value))
+        _emit(event, value)
+    }
+    else {
+      _emit(event, value)
+    }
+  }
+
   if (passive) {
     const initialValue = getValue()
     const proxy = ref<P[K]>(initialValue!)
@@ -105,7 +123,7 @@ export function useVModel<P extends object, K extends keyof P, Name extends stri
       proxy,
       (v) => {
         if (v !== props[key!] || deep)
-          _emit(event, v)
+          triggerEmit(v as P[K])
       },
       { deep },
     )
@@ -118,7 +136,7 @@ export function useVModel<P extends object, K extends keyof P, Name extends stri
         return getValue()!
       },
       set(value) {
-        _emit(event, value)
+        triggerEmit(value)
       },
     })
   }