Skip to content

feat(v-model): add support for custom element form bindings with cust… #9883

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

Closed
wants to merge 5 commits into from

Conversation

jcbond92
Copy link

@jcbond92 jcbond92 commented Dec 20, 2023

Problem

Vue does a great job with custom elements, but it doesn't have a way to specify which v-model type should be set for each custom element a user registers.

Setting app.config.compilerOptions.isCustomElement works well for text input components where library authors can emit an input event and use a value prop, but we are unable to support checkboxes and radio buttons since V_MODEL_TEXT is looking for event.target.value instead of event.target.checked.

The workaround is to set a type on the host element like this:

<template>
  <custom-checkbox type="checkbox" v-model="value">Label</custom-checkbox>
</template>

<script>
import "@custom-element-package/checkbox.js"
export default {
  data() {
    return {
      value: true
    };
  },
};
</script>

However, this is another step that users have to remember that could be globally set in the compilerOptions.

Solution

Add a new option, customElementType that users can alongside isCustomElement. This will give users a way to select the correct v-model type so that custom element libraries can begin supporting v-model.

app.config.compilerOptions.isCustomElement = (tag) => {
  return tag.startsWith('custom-')
}
app.config.compilerOptions.customElementType = (tag) => {
  if (tag === 'custom-checkbox') return 'checkbox';
}

close: #4428

@jcbond92 jcbond92 changed the base branch from main to minor July 11, 2024 20:06
@jcbond92 jcbond92 changed the base branch from minor to main July 11, 2024 20:06
@yyx990803
Copy link
Member

Thanks for the PR, but I think a runtime-based approach like #7525 is more ergonomic.

@yyx990803 yyx990803 closed this Aug 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Using v-model on a custom Element (from defineCustomElement): prop/event mismatch
3 participants