CorneVgit
commented
5 years ago Pretty sure you have to do v-bind:key="item.name.id"
or the shorthand version :key="item.name.id"
Closed iigmir closed 2 years ago
CorneVgit
commented
5 years ago Pretty sure you have to do v-bind:key="item.name.id"
or the shorthand version :key="item.name.id"
iigmir
commented
5 years ago Pretty sure you have to do
v-bind:key="item.name.id"
I know that, but it will be annoying when you need to write more v-bind:
<foo-bar v-for="(item) in link_binding" v-bind:key="item.name.id" v-bind:id="id_binding" v-bind:class="class_binding" v-bind:disabled="disabled_binding" v-bind:bind-to-child="bind_to_child_binding">
</foo-bar>I mean, I can write something like this to make components looks more clear:
<foo-bar v-for="(item, index) in link_binding" v-bind="foobar_binding(item, index)">
</foo-bar>
// In JavaScript
methods: {
foobar_binding(item, index) {
return {
key: index
id: item.whatever + "-dom"
// ... bypass
};
},
};or the shorthand version
:key="item.name.id"
It's impossible to bind an object of attributes using shorthand.
ota-meshi
commented
5 years ago Thank you for this issue.
We can't fully track scripts from v-bind directives, so we can only rule out errors when v-bind with no arguments is used.
However, I don't want to do this because ignoring v-bind with no arguments can leave a potentially invalid v-for.
I want to know your ideas.
iigmir
commented
5 years ago I usually write my v-bind into computed or methods instance(Or, at least, write them into v-bind="{ }" directive) to make component looks more clear and simple like what I mentioned above, thanks for the object binding syntax. But I can't do this in the iteration component due to the v-bind:key directive.
I don't know if this can clearly explain my idea.
However, as you said, it's not possible to fully track scripts from v-bind directives, so maybe it's hard to solve this issue.
FloEdelmann
commented
2 years ago You can use :key="item.name.id" v-bind="otherAttributes". Given this workaround, I guess it's fine to close this issue.
iigmir
commented
2 years ago Recently I found the article describing the key attribute on the official site:
keyhere is a special attribute being bound withv-bind. It should not be confused with the property key variable when using v-for with an object.
So I guess this is the way we should write.
Tell us about your environment
Please show your full configuration:
What did you do?
What did you expect to happen?
It should no error when
keyis in thev-bindattribute.What actually happened?
This is what puzzles me the most: I got this error when I use Vetur in VScode:
I try to use
yarn eslint src/my-file.vue, but there were no errors shown, so I post an issue in Vetur. However, my issue was closed because they said the issue "should be reported on eslint-plugin-vue".