v-bind property value shorthand

[GavinRay97]

I have a working rough proof-of-concept here: https://github.com/GavinRay97/vue/commit/524d4c441852e6ad2e174d53168221b1e3eb89fb

Allow binding property keys to values of the same name, the way that ES6 shorthand for object syntax works.

const a = 1
const b = 2

// Much more concise, especially when you have many entries
const obj = { a, b }

// Not DRY at all
const obj = { a: a, b: b }

<my-component :name :whatever>
// Translates to
<my-component :name="name" :whatever="whatever">

Inspired by this Twitter comment:

[leopiccionia]

The API change presented in this PR and ~~Robson~~ @phiter's tweet has been suggested many times in Vue's main repo.

One of those times, @yyx990803 argued that :prop (= :prop="prop") looks too similar to prop (= :prop="true"). I don't know if he changed his mind.

At first sight, I feel like this change trades faster writing with slower comprehension (not a good deal), as it departs from HTML's familiar key=value flow. I might get used to it, though.

---

P.S. Are you aware about the <my-component v-bind="{ name, whatever }" /> shorthand?

[phiter]

As I mentioned, I think this is a really nice improvement if added. I find myself writing :expanded="expanded" a lot when writing code. I don't see any drawbacks of using this. The only thing I could think of is if you simply want to pass an empty prop as you can do with most Vuetify components, for example:

<v-btn outlined>

But that would of course not use the value defined in data since it doesn't have v-bind.

Also I understand it could make the code a bit weird to read for people unaware of the feature, but so does other Vue features like CSS v-deep or >>>.

v-bind="{ name, whatever }" is also great but it's still a bit more verbose.

Take this Vuetify playground as an example, most of the data properties are repeated.

<v-text-field
    v-model="model"
    :label="label"
    :hint="hint"
    :placeholder="placeholder"
    :shaped="shaped"
    :outlined="outlined"
    :rounded="rounded"
    :solo="solo"
    :single-line="singleLine"
    :filled="filled"
    :clearable="clearable"
    :persistent-hint="persistentHint"
    :loading="loading"
    :flat="flat"
    :counter="counterEn ? counter : false"
    :dense="dense"
/>

Could be way shorter with the proposed change.

Also it looks more like ES6 objects which accepts a similar syntax as @GavinRay97 mentioned.

---

Also, @leopiccionia how do people still remember this Robson stuff? lmao it happened five years ago.

[GavinRay97]

At first sight, I feel like this change trades faster writing with slower comprehension (not a good deal), as it departs from HTML's familiar key=value flow. I might get used to it, though.

I would make the argument that when dealing with component attributes with a colon :, my frame of mind shifts from HTML to Javascript. When I see a bound property, I immediately see the expression as a Javascript, not HTML. If you want to make the argument that attributes should follow the key=value flow, then any expressions and inline statements to bound attributes should be explicitly disallowed.

I think we can come to a consensus that Vue templates are not HTML, nor are they JS. They are an independent entity with slightly different semantics. And that's okay. Those unique semantics are why we love Vue.

This sort of binding mirrors the way I would expect JS object expressions to behave. The syntax is identical to ES6 property value shorthands, which, in my experience, nearly everyone uses. In the context of "Bound Vue attribute = JS expression", I think there is little ambiguity as to mechanics or intent here.

P.S. Are you aware about the <my-component v-bind="{ name, whatever }" /> shorthand?

I did find that during researching whether this proposal/RFC has been presented before. I understand that functionally, the result is the same, but the appeal and attraction of Vue to most I believe has always been about it's ergonomics and semantics. We write Vue because it is beautiful and comprehensible, and to me, the object values v-bind are not particularly either of those.

[amoliski]

@phiter That playground could use this to tighten up the syntax, but I think in that case the verbosity is on purpose.

<v-text-field  
   v-model="model"  
   v-bind="{label, hint, placeholder, shaped,
      outlined, rounded, solo, filled,
      clearable, loading, flat, dense,
      'single-line':singleLine,
      'persistent-hint':persistentHint,
      counter: counterEn ? counter : false,
      }">
</v-text-field>  

https://codepen.io/amoliski/pen/pooJgvY

[phiter]

@amoliski this syntax is worse. Vue style guide recommends using one prop per line if you're going to pass three or more props. I think this is a bit harder to read than what we're used to.

Of course, we could use this instead:

<v-text-field
    v-model="model"
    v-bind="{
        label,
        hint,
        placeholder,
        shaped,
        outlined,
        rounded,
        solo,
        filled,
        clearable,
        loading,
        flat,
        dense,
        'single-line':singleLine,
        'persistent-hint': persistentHint,
        counter: counterEn ? counter : false,
    }"
/>

This would make more sense, but now you have commas and can be weird at first sight.

[amoliski]

Fair enough, I went a bit overboard collapsing it down to take up less space in the comment. The syntax isn't great, but it sure beats typing out fifteen equals signs and thirty quotes.

[michaeldrotar]

Seems reasonable.. to toss another slight deviation into the ring, I prefer something like this currently.. reads well, highlights well, digests easily imo

<v-text-field
  v-model="model"
  v-bind="{
    label, 
    hint, 
    placeholder, 
    shaped, 
    outlined, 
    rounded, 
    solo, 
    filled, 
    clearable, 
    loading, 
    flat, 
    dense
  }"
  :single-line="singleLine"
  :persistent-hint="persistentHint"
  :counter="counterEn ? counter : false"
>
</v-text-field>

There's another RFC floating around about adding property negation (!prop) so I could see a world where :prop prop !prop might not be ideal.

[CyberAP]

What would :[prop] mean then? Dynamically assigned prop with dynamically assigned value?

[phiter]

@CyberAP that should either be invalid or resolve to the data referenced by prop.

[csmikle]

@amoliski this syntax is worse. Vue style guide recommends using one prop per line if you're going to pass three or more props. I think this is a bit harder to read than what we're used to.

Of course, we could use this instead:

<v-text-field
    v-model="model"
    v-bind="{
        label,
        hint,
        placeholder,
        shaped,
        outlined,
        rounded,
        solo,
        filled,
        clearable,
        loading,
        flat,
        dense,
        'single-line':singleLine,
        'persistent-hint': persistentHint,
        counter: counterEn ? counter : false,
    }"
/>

This would make more sense, but now you have commas and can be weird at first sight.

This looks good to me, nothing wrong with some commas. It's not an extra character since the colons are saved

[hecktarzuli]

I'd love to see this shorthand become a reality. So many of our properties are :src="src", width="width" etc..

[prashantpalikhe]

Would love to have this terse syntax

[ojvribeiro]

This would be appreciated.

[tikudev]

I would also love this. It is a little funny when you dig into this topic and find that this idea comes up multiple times each year and everyone seems to have the same syntax-intuition. That to me sounds like this syntax can be intuitively understood, since a similar syntax is used by js property shorthand. I get a question about a shorthand for props nearly every time I teach vue to a new developer.

@yyx990803 stated his opinion on the topic in the year 2016. Given the many many request I hope he reconsiders.

Vue is losing some of its popularity lately and I think that such a little Quality of Life Improvement could go a long way.

[tikudev]

Since there was no RFC-Discussion open; I created an RFC regarding this issue. I proposed a solution which effectively supports this syntax:

<v-text-field
    v-model="model"
    {label}
    {hint}
    {placeholder}
    {shaped} />

[phiter]

This has been added to Vue 3.4 via this PR https://github.com/vuejs/core/pull/9451 There was another issue posted here too with this same proposal: https://github.com/vuejs/rfcs/discussions/405

[GavinRay97]

Wow, holy smokes. Was not expecting that, half a decade later! 😁