v-bind shorthand for equal property and attribute name

[CyberAP]

What problem does this feature solve?

Sometimes we're binding attributes to the props that have exactly the same name. So we could simplify v-bind:attr="attr" or :attr="attr" to just this: :attr.

What does the proposed API look like?

<Component :attr />

Equals to

<Component :attr="attr" />

Equals to

<Component v-bind:attr="attr" />

[JounQin]

#2877 (comment)

[CyberAP]

Haven't found that in google results. Thanks.

[leopiccionia]

With ES6 syntax, you can write:

<Component v-bind="{ foo, bar, baz}" />

That's equivalent to:

<Component :foo="foo" :bar="bar" :baz="baz" />

More details on Vue API docs.

[CyberAP]

@leopiccionia, thanks!

[Mouvedia]

@leopiccionia can you handle camelcase to kebabcase conversion automatically ?

[vis97c]

Vue 3.4 now supports this feature. See vuejs/core#9451 or the Announcement