Shorter binding for props with the same data name

[rinodrummer]

Hi guys!

I always thought that may be repetitive to re-write the prop value if it has the same name of the data we want to bind, so that's my suggestion: let us use another form of the v-bind shorthand for this purpose, for example:

Let's suppose we have a prop called title and a data called the same way, what we usually do is this:

<blog-post
    :title="title"
/>

As you can see, here we have a redundant information.

My purpose is to let us do this to achieve the same result:

<blog-post
    ::title
/>

[ChristoPy]

I really like the ideia.
Sometimes, I wish Vue could reduce this redundancy.

Svelte and React does this with brackets around the prop name:

<blog-post
    {title}
/>

The proposed shorthand is very useful.
But I think that with double :: could make refactoring a little more difficult.
Or add too much complexity for new learners (since v-bind could have more than one shorthand).

So, to reduce the learning curve or refactoring, the new shorthand could be as close as the current v-bind shorthand.

<blog-post
    :title
/>

[leopiccionia]

I like this proposal because it has some symmetry with HTML boolean attributes, where checked disabled is equivalent to checked="checked" disabled="disabled".

[julie777]

I'll add my vote for v-bind:attr or :attr is equivalent to v-bind:attr="attr" and :attr="attr" because when I first saw

:title

above it seemed obvious that I was binding the title variable to the title attribute. (I am relatively new to Vue, so my reaction is from someone who is not set in her ways and is already tired of typing :title="title" all the time. I like "script setup" for the same reason.)

[rinodrummer]

My idea is suited for every prop of a component, let's suppose you have an author string prop, you should automatically bind it with my proposed shorthand like this:

<blog-post
    ::author <!-- Instead of :author="author" -->
/>

[Demivan]

@rinodrummer It is the same idea. Just instead of ::prop syntax it is :prop. I like it more - there is no need to invent new syntax for this.

[rinodrummer]

I know, I used my syntax to make more clear the example I provided in comparison to my original post.

[edison1105]

<blog-post
    ::author <!-- Instead of :author="author" -->
/>

I love this.

[AndrewBogdanovTSS]

Why not just <blog-post :author/> ?

[leopiccionia]

I've just remembered single-colon shorthand was already proposed many times for Vue 2, and Evan wasn't a fan back then.

See examples:
vuejs/vue#2877
vuejs/vue#5835

Quoting one of them:

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.

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

[darrylnoakes]

Has this stalled?

Another syntax idea:

<blog-post
    :{title}
/>

[tikudev]

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

<blog-post
    {title}
/>

[matthew-dean]

I prefer this

[zhiyuanzmj]

I created a PR for vue-macros vue-macros/vue-macros#493 :

<script setup lang="ts">
import { ref } from 'vue'
import Child from './child.vue'

const value = ref('')
</script>

<template>
  <input :value />   <!-- <Child :value="value" /> -->

  <Child ::value />  <!-- <Child v-model:value="value" /> -->
</template>

[Kiwasu]

This is awesome!

[zhangenming]

// how about 
<comp @event></comp>

// equivalent to
<comp @event="event"></comp>

[AndrewBogdanovTSS]

After I updated to this syntax I start to get eslint errors about unused variables

<div v-for="({ image, price, title, url, recToken, rating }, i) in recommendedProducts" :key="i">
  <product-card-recommended :currency="currency[locale]" :title :url :image :price :rating />
</div>

  17:21  error  'image' is defined but never used   vue/no-unused-vars
  17:28  error  'price' is defined but never used   vue/no-unused-vars
  17:35  error  'title' is defined but never used   vue/no-unused-vars
  17:42  error  'url' is defined but never used     vue/no-unused-vars
  17:57  error  'rating' is defined but never used  vue/no-unused-vars

is there any way to properly fix it?

[zhiyuanzmj]

You can try upgrading eslint-plugin-vue to v9.20.0.
https://github.com/vuejs/eslint-plugin-vue/releases/tag/v9.20.0

[AndrewBogdanovTSS]

I'm on 9.21.0 - didn't help