Vue: New prop shorthand

[maurop123]

What problem does this feature solve?

When passing props to a component, the following pattern is very common,

<my-component :propA="propA" :propB="propB" />

I am proposing that when the prop name is the same as the variable name being passed to it, that the following more concise syntax be applicable,

<my-component :propA :propB :propC />

This would mimic ES6's object property declaring shorthands (like here http://www.benmvp.com/learning-es6-enhanced-object-literals/)

What does the proposed API look like?

<my-component :propA :propB :propC />

instead of

<my-component :propA="propA" :propB="propB" />

[sirlancelot]

If you're using ES6 already (via webpack's vue-loader), you can try <my-component v-bind="{ propA, propB, propC }">

[sqal]

https://github.com/vuejs/vue/pull/2877

[LinusBorg]

Quoting Evan from #2877:

Took me some time to respond this because I am not really a fan of this proposal but it wasn't immediately clear to me what turned me off. I tried it out and it just felt weird to me:

<comp :a :b></comp>

Now I realize it's because of the semantic implication of HTML attributes that have no values - they are usually boolean attributes. An attribute with no value indicates the "presence of an attribute" or "truthiness". Implicitly expanding to a binding overloads this perception.

In addition - if a prop in the child component is declared with type Boolean, the presence of the attribute indicates a true value. This would cause prop and :prop to have very different meanings, and is technically a breaking change.

@maurop123 Do you have any arguments against the issues Evan raised? If not, I would close this feature request as a duplicate.

Also, @sirlancelot mentioned a nice "workaround" to make something like this possible with the current API.

[maurop123]

Thank @sirlancelot for the approach. I just tried it and it works great.

@LinusBorg I do agree with Evan's argument. Thank you for bringing it up.

I'll close it now :+1: