Bind Data to Props with the same Name with shorthand syntax for v-bind="{}"

[tikudev]

• Start Date: 2023-07-09
• Target Major Version: 2.x and 3.x
• Reference Issues:
  • May 10, 2016
  • May 14, 2016, with initial decision against :prop syntax
  • Jun 30, 2016
  • Jan 31, 2017
  • Mar 2, 2017
  • Jun 6, 2017
  • Sep 12, 2017
  • Mar 16, 2018
  • Jul 5, 2018
  • Aug 18, 2018
  • Oct 9, 2018
  • Oct 4, 2019
  • Jan 7, 2021
  • Oct 23, 2021
  • Jan 26, 2022
  • Jul 2, 2022
• Implementation PR:

Summary

This RFC proposes a shorthand syntax in templates for v-binding entire objects and to allow multiple object-v-binds on the same element. Those seemingly unrelated features could help resolve a long standing issue (see Reference Issues) in the vue community. That is it would allow to express prop bindings with the same name, without writing the name twice and without much more boilerplate.

Basic example

<!-- Existing syntax -->
<template>
  <MyComponent
    :width="width"
    :height="height"
    name="Joe"
    :x="x"
    :y="y"
    :foo="bar"
    @ready="onReady"
  />
</template>
<!-- Proposed shorthand -->
<template>
  <MyComponent {width} {height} name="Joe" {x} {y} :foo="bar" {onReady} />
</template>

<!-- Use v-bind with existing syntax -->
<template>
  <MyComponent v-bind="{width, height, x, y, onReady}" name="Joe" :foo="bar" />
</template>
<!-- Use v-binds proposed shorthand; this is also possible -->
<template>
  <MyComponent {width, height, x, y, onReady} name="Joe" :foo="bar" />
</template>

Motivation

Improve readability and reduce verbosity in Vue.js templates when binding a property to a variable with the same name and to do so in a manner that integrates well with the existing syntax.

Detailed design

Terminology: I will call a binding without naming a prop (v-bind="Obj") an object-v-bind

Problem

A lot of people in the community expressed their feeling, that the binding of a property to a variable with the same name seems too verbose (see Reference Issues). On those occasions, one proposed solution to this problem, was to just use an object-v-bind, create an object and use the js object property shorthand (v-bind="{foo}"). This solution has the following drawbacks:

1. verbosity

For short variable names, this solution could even introduce more characters

2. forced grouping

All props that use this shorthand need to be put together inside the same v-bind

Solution

1. Verbosity: Shorthand for object-v-bind

• v-bind="{foo}" -> {foo}
• v-bind="{foo, bar}" -> {foo, bar}

Should be possible to implement, since <foo {abc}/> is not valid html. Vite fails with: Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '{abc}' is not a valid attribute name.

2. Forced Grouping: Allow multiple object-v-binds

Right now this is not possible (and so verbose, that I think that no one seriously tried it, to solve a problem):

<template>
  <MyComponent
    v-bind="{width}"
    v-bind="{height}"
    name="Joe"
    v-bind="{x}"
    v-bind="{y}"
  />
</template>

-> [vite] Internal server error: Duplicate attribute

My mental model for object-v-binds is, that an object is 'spread' into a component, therefore I did at first not expect this to be invalid, and it does not need to be in my opinion. The same reason for why const myComponent = {...{width}, ...{height}} is valid javascript.

Edge Case: Property Merging with multiple v-binds

• Vue 3: Order of the bindings. In the example below, the last binding 'wins' (height: 42)

<template>
  <MyComponent v-bind="{width, height}" v-bind="{height: 42}" />
</template>

• Vue 2: Also order of the bindings for object-v-binds individual attributes still always 'win'

Vue 3 specific

• Listener can also use this mechanism

<template>
  <MyComponent {onReady} />
</template>

Coincidental Similarities to Svelte Prop shorthand

In Svelte the syntax for binding a prop is a little different:

<!-- svelte -->
<Widget foo="{bar}" text="hello" />
<!-- vue -->
<Widget :foo="bar" text="hello" />

In Svelte it is determined whether the content of an attribute is an expression through curly brackets around the content. In vue it is determined through the colon in front of the attributes name.

The shorthand in Svelte looks like this:

<!-- without shorthand-->
<Widget foo="{foo}" />
<!-- with shorthand -->
<Widget {foo} />

Thus the 'expression-defining' characters are placed around the prop.
In Vue this would look like this:

<!-- without shorthand-->
<Widget :foo="foo" />
<!-- with shorthand (same reasoning as svelte shorthand) -->
<Widget :foo />

However, this proposal is not primarily about this :prop syntax, and is about doing it differently than Svelte by using the same syntax as Svelte:

<!-- SVELTE without shorthand-->
<Widget foo="{foo}" />
<!-- SVELTE with shorthand -->
<Widget {foo} />

<!-- VUE without shorthand-->
<Widget :foo="foo" />
<!-- VUE with shorthand (proposed here) -->
<Widget {foo} />

Drawbacks

• Yet another way to do the same thing; Questions may arise like: Should I use {a, b, c} or {a} {b} {c} or {a, b} {c}? Should I use v-bind="$attrs" or {...$attrs}?
• While this change can be summarised in a single sentence: "{} is the shorthand vor v-bind="{}"". It is still new syntax, that needs to be learned.
• Potentially more heterogenous code; code that uses this shorthand and code that doesn't
• Maybe not the most intuitive syntax, far more people came up with the :prop shorthand (roughly every six months, see Reference Issues)
• Solutions to problems on e.g. StackOverflow using this new syntax are not compatible with vue-versions who do not have this. Therefore it would not be possible to simply copy-and-paste that code.

Alternatives

The big elephant in this RFC are the existing 16 times, that someone from the community tried to tackle this problem, since May, 2016. The proposed syntax primarily was :prop. This syntax seems to have problems. However, it seems that this syntax might still be the most intuitive, since it had been reinvented for most of the related issues.

Another alternative is of course to not invent anything new. To me it seems, through the amount of issues each year, that this problem should be addressed.

Adoption strategy

This proposal can be adopted in a similar way as other shorthands (v-slot # shorthand; v-bind:prop="" -> :prop).
One could configure the desired style in a linter and have the linter auto-fix an existing Code-Base.

Unresolved questions

What were the reasons to previously not allow multiple object-v-binds? This is maybe not as simple as it seems.

Does the introduction of this new syntax block capabilities of formulating a different syntax in the future? Is it worth it?

[tikudev]

Closed. Problem is fixed with vuejs/core#9451