Vue 2.0 bind value prop to custom element

I have a custom element that requires that I pass in an object as a dom property. In Vue 2 this would typically be done like

<my-element :foo.prop="{'hello': 'world'}" />

This works:

document.getElementsByTagName('my-element')[0].foo
> {hello: "world"}

But if I try to bind to the value prop:

<my-element :value.prop="{'hello': 'world'}" />

This doesn't work. Vue stringifies the object.

document.getElementsByTagName('my-element')[0].value
> "[object Object]"

Of course I can get around this by just using a ref, but this should work, right?

https://codepen.io/rhotzq2/pen/MWbOvWo



Read more here: https://stackoverflow.com/questions/66336401/vue-2-0-bind-value-prop-to-custom-element

Content Attribution

This content was originally published by Robert Hotz at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: