search

vuejs / babel-plugin-transform-vue-jsx

babel plugin for vue 2.0 jsx
1.85k stars 132 forks source link

How to set complex object to attribues #121

Closed andtii closed 6 years ago

andtii commented 6 years ago

In vue templates you can set complex obects to attribute using

<my-comp :myprop.prop="{my: "data"}" />

but i cant find how to do this with jsx?

<my-comp myprop={{my: "data"}}" /> is setting the object on the attribute in the dom and there will be a [Object object] passed which will not be accessible

Any ideas @ktsn or @LinusBorg

LinusBorg commented 6 years ago

It seems you are talking about domProps, not attributes.

DomProps aren't supported by this plugin, I think. React doesn't have such a feature and the JSX spec therefore doesn't have a syntax for it as well.

Similarly, event modifiers (e.g. @click.prevent) isn't supported.

@nickmessing created a transform for the latter: babel-plugin-jsx-event-modifiers, maybe he has an idea?

nickmessing commented 6 years ago

@andtii, to bind to domProp you can simply prepend it with domProp- so it is like domProp-myprop. That should do the trick.

LinusBorg commented 6 years ago

Oh, totally missed that nick thanks.

andtii commented 6 years ago

Thnx @nickmessing it worked using domProps-myprop and the domProps is documentet here https://github.com/vuejs/babel-plugin-transform-vue-jsx but missing the dash in the documentation for it.

nickmessing commented 6 years ago

That is because dash is not required, I just like it :)

On Jan 14, 2018 7:15 PM, "andtii" notifications@github.com wrote:

Closed #121 https://github.com/vuejs/babel-plugin-transform-vue-jsx/issues/121.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/vuejs/babel-plugin-transform-vue-jsx/issues/121#event-1423378813, or mute the thread https://github.com/notifications/unsubscribe-auth/ABjuIokW6pt7P1iiC9wt2nQuLx1q4VW8ks5tKjZCgaJpZM4Rdjrk .