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 '18 at 10:00
JacobJacob
617
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 '18 at 10:00
JacobJacob
617
you could refer to this vuejs.org/v2/guide/list.html#key
– Boussadjra Brahim
Nov 23 '18 at 10:06
well we all got in there at the same time.
– Andrew1325
Nov 23 '18 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 '18 at 10:00
JacobJacob
617
<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 '18 at 10:00
JacobJacob
617
asked Nov 23 '18 at 10:00
JacobJacob
617
asked Nov 23 '18 at 10:00
JacobJacob
617
asked Nov 23 '18 at 10:00
JacobJacob
617
asked Nov 23 '18 at 10:00
JacobJacob
617
617
you could refer to this vuejs.org/v2/guide/list.html#key
– Boussadjra Brahim
Nov 23 '18 at 10:06
well we all got in there at the same time.
– Andrew1325
Nov 23 '18 at 10:07
add a comment |
you could refer to this vuejs.org/v2/guide/list.html#key
– Boussadjra Brahim
Nov 23 '18 at 10:06
well we all got in there at the same time.
– Andrew1325
Nov 23 '18 at 10:07
you could refer to this vuejs.org/v2/guide/list.html#key
– Boussadjra Brahim
Nov 23 '18 at 10:06
you could refer to this vuejs.org/v2/guide/list.html#key
– Boussadjra Brahim
Nov 23 '18 at 10:06
well we all got in there at the same time.
– Andrew1325
Nov 23 '18 at 10:07
well we all got in there at the same time.
– Andrew1325
Nov 23 '18 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 '18 at 10:06
qwsdqwsd
11913
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 '18 at 10:06
Andrew1325Andrew1325
625310
add a comment |
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 '18 at 10:06
qwsdqwsd
11913
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 '18 at 10:06
qwsdqwsd
11913
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 '18 at 10:06
qwsdqwsd
11913
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 '18 at 10:06
qwsdqwsd
11913
answered Nov 23 '18 at 10:06
qwsdqwsd
11913
answered Nov 23 '18 at 10:06
qwsdqwsd
11913
answered Nov 23 '18 at 10:06
qwsdqwsd
11913
11913
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 '18 at 10:06
Andrew1325Andrew1325
625310
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 '18 at 10:06
Andrew1325Andrew1325
625310
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 '18 at 10:06
Andrew1325Andrew1325
625310
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 '18 at 10:06
Andrew1325Andrew1325
625310
answered Nov 23 '18 at 10:06
Andrew1325Andrew1325
625310
answered Nov 23 '18 at 10:06
Andrew1325Andrew1325
625310
answered Nov 23 '18 at 10:06
Andrew1325Andrew1325
625310
625310
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.
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 '18 at 10:06
well we all got in there at the same time.
– Andrew1325
Nov 23 '18 at 10:07