Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

v-model support for web components (stenciljs)

See original GitHub issue

What problem does this feature solve?

V-model support for web components(tested with web component implemented with ionic’s stenciljs compiler).

Does not work:

<ui-input v-model="mySelect" />

Works:

<ui-input :value="mySelect" @input="mySelect = $event.target.value" />

Can this be enabled to support ignored elements as well that have been declared with:

Vue.config.ignoredElements = [/^ui-/];

What does the proposed API look like?

Declaration

Vue.config.ignoredElements = [/^ui-/];

Usage

<ui-input v-model="mySelect" />

Issue Analytics

State:
Created 6 years ago
Reactions:33
Comments:18 (1 by maintainers)

Top GitHub Comments

16reactions

calebdwilliamscommented, Nov 29, 2018

I really like the idea of v-model:eventName, that would definitely help us out. We’ve created a series of form web components that have their own APIs that work fine in Angular and React, but this issue is hampering out adoption in Vue. Would love to see some input from maintainers on this and would be interested in helping implement if needed.

12reactions

chris-washingtoncommented, Nov 29, 2018

Has anyone began to investigate this. This has had a huge impact on us in moving forward with using Vue. It also appears that Vue is the only framework where we are seeing binding issues with our web components.