Comments (17)
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?
from rfcs.
Wow, holy smokes. Was not expecting that, half a decade later! π
from rfcs.
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.
from rfcs.
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.
from rfcs.
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.
from rfcs.
@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
from rfcs.
@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.
from rfcs.
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.
from rfcs.
What would :[prop]
mean then? Dynamically assigned prop with dynamically assigned value?
from rfcs.
@CyberAP that should either be invalid or resolve to the data referenced by prop
.
from rfcs.
@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
from rfcs.
I'd love to see this shorthand become a reality. So many of our properties are :src="src", width="width" etc..
from rfcs.
Would love to have this terse syntax
from rfcs.
This would be appreciated.
from rfcs.
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.
from rfcs.
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} />
from rfcs.
This has been added to Vue 3.4 via this PR vuejs/core#9451
There was another issue posted here too with this same proposal: #405
from rfcs.
Related Issues (20)
- Adding a .v shortcut for .value HOT 4
- [FEAT] Required slots HOT 1
- Add abstraction for System Modifier Key: ctrl+c on Windows equals cmd+c on macOS HOT 1
- Pure TypeScript props declaration for the Options API, like we have defineProps() for the Composition API? HOT 4
- <script setup> : Make it possible to call defineProps many times HOT 10
- All Transition and TransitionGroup JavaScript hooks should be async
- Make runtime Props validation optional HOT 5
- Teleport as a composable/function
- An option to generate scoped styles using `:where` HOT 6
- Provide/inject for EffectScope
- Compiler: whitelist `import` global in template HOT 2
- Native CSS Modules
- Add impassive event modifier !passive HOT 2
- Stop script setup from executing any further HOT 1
- AsyncFunctionalComponent HOT 4
- Add a '.noinherit' modifier HOT 2
- Feature Request: `$emit` to return a Promise notifying when the event handler has run HOT 5
- Vue SSR app renderToString catch errors/warnings
- [Warnings] Silence Vue warnings in DEV
- expose ζ―ζδΌ ε ₯εεΊεΌε―Ήθ±‘ HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from rfcs.