Vue: Suggestion: Rename `:key` (i.e. `v-bind:key`) to `v-key`

Created on 30 Sep 2019 · 3Comments · Source: vuejs/vue

What problem does this feature solve?

The current syntax of key ( https://vuejs.org/v2/guide/list.html#Maintaining-State ) is inconsistent with the v-bind directive:
https://vuejs.org/v2/guide/syntax.html#Attributes says that <div v-bind:foo="..."> will result in <div foo="...">.

However, v-bind:key (shorthand: :key) will not bind anything to the HTML attribute key! The result will not be <div key="...">.

So I suggest to just rename key to v-key, to show that this is something internal to Vue.

What does the proposed API look like?

v-key

Source

ThomasLandauer

👍28

Most helpful comment

I created my own Vue component where it would make sense to have a prop called key, but I assumed problem would arise if someone needed to use it in a v-for loop and add a :key to it as well, so I called my prop something else instead, which was a much worse name. Renaming it to v-key would allow me to use a prop named key on my own components, which would have been much better.

Also, I guess that if an HTML attribute called key is added to an HTML element in the future a workaround would be needed to use it in Vue, e.g. to call it html-key or similar instead, which would be quite bad.

So renaming key to v-key sounds like a good idea to me.