Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(useVModel): add shouldEmit hook #2836

Merged
merged 7 commits into from Mar 23, 2023

Conversation

baiwusanyu-c
Copy link
Contributor

@baiwusanyu-c baiwusanyu-c commented Mar 2, 2023

Warning: ⚠️ Slowing down new functions

Due to the growing audience of VueUse, we received a huge amount of feature requests and pull requests. It's become harder and harder and recently a bit beyond our capacity to maintain the project. In the near future, we could like slowing down on accepting new features and prioritize the stability and quality of existing functions. New functions to VueUse may not be accpected. If you come up some new ideas, we advice you to have them in your codebase first instead of proposing to VueUse. You may iterate them a few time and see how them suite your needs and how them can be generalized. If you really believe they are useful to the community, you can create PR with your usercases, we are still happy to hear and discuss. Thank you for your understanding.

Description

I encountered a scenario that is in the complex form component A, usually we will use it as the parent component, and implement the v-model in the child component B, but when using useVModel, it automatically triggers the emit event, which makes I can only write the verification rules in component A. When the form is very complicated, it will become very bloated. I want to have a hook method, verify in the hook method, and decide whether to start based on the verification result emit event.

// A.vue
<template>
  <B  v-model='foo' />
</template>

// B.vue
<template>
   .....
</template>

<script setup>
  const props = definedProps(['modelValue'])
  const emits = definedEmits(['update:modelValue'])
  const data = useVModel(props,  'modelValue', emits, { beforeEmit })
  function beforeEmit(value) {
    // If the verification fails, return false and the emit event will not be triggered
    if(value === 1) return false 
    return true
 }
</script>

Additional context


What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the Pull Request Guidelines.
  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • Ideally, include relevant tests that fail without this PR but pass with it.

@antfu antfu changed the title feat(useVModel): add beforeEmit hook method feat(useVModel): add shouldEmit hook Mar 23, 2023
@antfu antfu merged commit f8a5328 into vueuse:main Mar 23, 2023
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants