We also need to provide each component with a “key” vuejs
<div id="app-7">
<ol>
<!--
Now we provide each todo-item with the todo object
it's representing, so that its content can be dynamic.
We also need to provide each component with a "key"
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
My question why We also need to provide each component with a "key" where any example that can help me to understand please
vue.js
asked Nov 23 at 10:00
Jacob
355
add a comment |
<div id="app-7">
<ol>
<!--
Now we provide each todo-item with the todo object
it's representing, so that its content can be dynamic.
We also need to provide each component with a "key"
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
My question why We also need to provide each component with a "key" where any example that can help me to understand please
vue.js
asked Nov 23 at 10:00
Jacob
355
you could refer to this vuejs.org/v2/guide/list.html#key
– Boussadjra Brahim
Nov 23 at 10:06
well we all got in there at the same time.
– Andrew1325
Nov 23 at 10:07
add a comment |
<div id="app-7">
<ol>
<!--
Now we provide each todo-item with the todo object
it's representing, so that its content can be dynamic.
We also need to provide each component with a "key"
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
My question why We also need to provide each component with a "key" where any example that can help me to understand please
vue.js
asked Nov 23 at 10:00
Jacob
355
<div id="app-7">
<ol>
<!--
Now we provide each todo-item with the todo object
it's representing, so that its content can be dynamic.
We also need to provide each component with a "key"
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
My question why We also need to provide each component with a "key" where any example that can help me to understand please
vue.js
vue.js
asked Nov 23 at 10:00
Jacob
355
asked Nov 23 at 10:00
Jacob
355
asked Nov 23 at 10:00
Jacob
355
asked Nov 23 at 10:00
Jacob
355
asked Nov 23 at 10:00
Jacob
355
355
you could refer to this vuejs.org/v2/guide/list.html#key
– Boussadjra Brahim
Nov 23 at 10:06
well we all got in there at the same time.
– Andrew1325
Nov 23 at 10:07
add a comment |
you could refer to this vuejs.org/v2/guide/list.html#key
– Boussadjra Brahim
Nov 23 at 10:06
well we all got in there at the same time.
– Andrew1325
Nov 23 at 10:07
you could refer to this vuejs.org/v2/guide/list.html#key
– Boussadjra Brahim
Nov 23 at 10:06
you could refer to this vuejs.org/v2/guide/list.html#key
– Boussadjra Brahim
Nov 23 at 10:06
well we all got in there at the same time.
– Andrew1325
Nov 23 at 10:07
well we all got in there at the same time.
– Andrew1325
Nov 23 at 10:07
add a comment |
2 Answers
2
active
oldest
votes
Vue uses the key attribute to "track" each node rendered by a v-for loop, for performance purpose.
You can find more information here https://vuejs.org/v2/guide/list.html#key
answered Nov 23 at 10:06
qwsd
843
add a comment |
When Vue is updating a list of elements rendered with v-for, by default it uses an “in-place patch” strategy. If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will patch each element in-place and make sure it reflects what should be rendered at that particular index. This is similar to the behavior of track-by="$index" in Vue 1.x.
that's from the docs
answered Nov 23 at 10:06
Andrew1325
33828
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53444423%2fwe-also-need-to-provide-each-component-with-a-key-vuejs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Vue uses the key attribute to "track" each node rendered by a v-for loop, for performance purpose.
You can find more information here https://vuejs.org/v2/guide/list.html#key
answered Nov 23 at 10:06
qwsd
843
add a comment |
Vue uses the key attribute to "track" each node rendered by a v-for loop, for performance purpose.
You can find more information here https://vuejs.org/v2/guide/list.html#key
answered Nov 23 at 10:06
qwsd
843
add a comment |
Vue uses the key attribute to "track" each node rendered by a v-for loop, for performance purpose.
You can find more information here https://vuejs.org/v2/guide/list.html#key
answered Nov 23 at 10:06
qwsd
843
Vue uses the key attribute to "track" each node rendered by a v-for loop, for performance purpose.
You can find more information here https://vuejs.org/v2/guide/list.html#key
answered Nov 23 at 10:06
qwsd
843
answered Nov 23 at 10:06
qwsd
843
answered Nov 23 at 10:06
qwsd
843
answered Nov 23 at 10:06
qwsd
843
843
add a comment |
add a comment |
When Vue is updating a list of elements rendered with v-for, by default it uses an “in-place patch” strategy. If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will patch each element in-place and make sure it reflects what should be rendered at that particular index. This is similar to the behavior of track-by="$index" in Vue 1.x.
that's from the docs
answered Nov 23 at 10:06
Andrew1325
33828
add a comment |
When Vue is updating a list of elements rendered with v-for, by default it uses an “in-place patch” strategy. If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will patch each element in-place and make sure it reflects what should be rendered at that particular index. This is similar to the behavior of track-by="$index" in Vue 1.x.
that's from the docs
answered Nov 23 at 10:06
Andrew1325
33828
add a comment |
When Vue is updating a list of elements rendered with v-for, by default it uses an “in-place patch” strategy. If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will patch each element in-place and make sure it reflects what should be rendered at that particular index. This is similar to the behavior of track-by="$index" in Vue 1.x.
that's from the docs
answered Nov 23 at 10:06
Andrew1325
33828
When Vue is updating a list of elements rendered with v-for, by default it uses an “in-place patch” strategy. If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will patch each element in-place and make sure it reflects what should be rendered at that particular index. This is similar to the behavior of track-by="$index" in Vue 1.x.
that's from the docs
answered Nov 23 at 10:06
Andrew1325
33828
answered Nov 23 at 10:06
Andrew1325
33828
answered Nov 23 at 10:06
Andrew1325
33828
answered Nov 23 at 10:06
Andrew1325
33828
33828
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53444423%2fwe-also-need-to-provide-each-component-with-a-key-vuejs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
you could refer to this vuejs.org/v2/guide/list.html#key
– Boussadjra Brahim
Nov 23 at 10:06
well we all got in there at the same time.
– Andrew1325
Nov 23 at 10:07