VueJS for loop creating components, components seem to be linked
0
i'm doing a for loop on an array, for each value i'm creating a component. I was under the impression that I need to put a key on the for loop so that Vue knows it is unique?
<div v-for="hours in location.hours" class="businessHours" :key="hours.id">
<business-hours :response="hours" :unique-key="uniqueKey" :default-weekdays="response.weekdays">
<div slot-scope="{ hours, weekdays, title, uniqueKey, toggle, inArray, componentKey }">
<div class="panel-heading v-center">
<div class="field">
Within this component I have got some logic that just selects/deselected checkboxes, however these 2 components seem to be linked. When I click checkboxes on one of them, the other one changes too!
This is my component:
<template>
<div>
<slot :hours="response" :weekdays="weekdays" :title="title" :toggle="toggle" :inArray="inArray" :componentKey="componentKey"></slot>
</div>
</template>
<script>
export default {
props: [ 'response', 'uniqueKey', 'defaultWeekdays' ],
data: function() {
return {
weekdays: this.response.weekdays,
componentKey: this.key()
}
},
created() {
if (this.weekdays === undefined) {
this.weekdays = this.defaultWeekdays;
}
},
methods: {
title: function() {
if (this.weekdays === undefined) return;
let selected = Object.keys(this.weekdays).filter((e) => { if (this.weekdays[e].selected) return e });
if (selected.length === 0) return;
let start = this.weekdays[parseInt(selected[0])].value;
let end = this.weekdays[parseInt(selected[selected.length - 1])].value;
if (start === end) {
return start.charAt(0).toUpperCase() + start.substring(1);
}
return start.charAt(0).toUpperCase() + start.substring(1) + ' - ' + end.charAt(0).toUpperCase() + end.substring(1);
},
toggle: function(index) {
let clicked = this.weekdays[index];
let action = clicked.selected ? 'remove' : 'add';
let selected = Object.keys(this.weekdays).filter((i) => { if (this.weekdays[i].selected) return i });
let start = parseInt(selected[0]);
let middle = parseInt(selected[Math.floor(selected.length / 2)]);
let end = parseInt(selected[selected.length - 1]);
if (isNaN(start) && isNaN(middle) && isNaN(end)) {
start = middle = end = index;
}
// Add and remove multiple days
if (index < (start - 1) && action === 'add') {
for (let i = index; i <= (start - 1); i++) {
this.weekdays[i].selected = true;
}
}
if (index > start && index < middle && action === 'remove') {
for (let i = start; i <= index; i++) {
this.weekdays[i].selected = false;
}
}
if (index > (end + 1) && action === 'add') {
for (let i = end + 1; i <= index; i++) {
this.weekdays[i].selected = true;
}
}
if (index < end && index >= middle && action === 'remove') {
for (let i = index; i <= end; i++) {
this.weekdays[i].selected = false;
}
}
// Add and remove single days
if ((index === (end + 1) || index === (start - 1)) || (index === end || index === start) && action === 'add') {
this.weekdays[index].selected = true;
}
if ((index === end || index === start) && action === 'remove') {
this.weekdays[index].selected = false;
}
},
inArray: function(needle) {
let length = this.weekdays.length;
for(let i = 0; i < length; i++) {
if(this.weekdays[i] === needle) return true;
}
return false;
},
key: function() {
return Math.random().toString(36).replace(/[^a-z0-9]+/g, '').substr(0, 10);
}
}
}
</script>
Can someone lend me a hand here as to why this is happening?
javascript vue.js
asked Nov 13 '18 at 16:49
Martyn BallMartyn Ball
1,36222551
|
show 5 more comments
0
i'm doing a for loop on an array, for each value i'm creating a component. I was under the impression that I need to put a key on the for loop so that Vue knows it is unique?
<div v-for="hours in location.hours" class="businessHours" :key="hours.id">
<business-hours :response="hours" :unique-key="uniqueKey" :default-weekdays="response.weekdays">
<div slot-scope="{ hours, weekdays, title, uniqueKey, toggle, inArray, componentKey }">
<div class="panel-heading v-center">
<div class="field">
Within this component I have got some logic that just selects/deselected checkboxes, however these 2 components seem to be linked. When I click checkboxes on one of them, the other one changes too!
This is my component:
<template>
<div>
<slot :hours="response" :weekdays="weekdays" :title="title" :toggle="toggle" :inArray="inArray" :componentKey="componentKey"></slot>
</div>
</template>
<script>
export default {
props: [ 'response', 'uniqueKey', 'defaultWeekdays' ],
data: function() {
return {
weekdays: this.response.weekdays,
componentKey: this.key()
}
},
created() {
if (this.weekdays === undefined) {
this.weekdays = this.defaultWeekdays;
}
},
methods: {
title: function() {
if (this.weekdays === undefined) return;
let selected = Object.keys(this.weekdays).filter((e) => { if (this.weekdays[e].selected) return e });
if (selected.length === 0) return;
let start = this.weekdays[parseInt(selected[0])].value;
let end = this.weekdays[parseInt(selected[selected.length - 1])].value;
if (start === end) {
return start.charAt(0).toUpperCase() + start.substring(1);
}
return start.charAt(0).toUpperCase() + start.substring(1) + ' - ' + end.charAt(0).toUpperCase() + end.substring(1);
},
toggle: function(index) {
let clicked = this.weekdays[index];
let action = clicked.selected ? 'remove' : 'add';
let selected = Object.keys(this.weekdays).filter((i) => { if (this.weekdays[i].selected) return i });
let start = parseInt(selected[0]);
let middle = parseInt(selected[Math.floor(selected.length / 2)]);
let end = parseInt(selected[selected.length - 1]);
if (isNaN(start) && isNaN(middle) && isNaN(end)) {
start = middle = end = index;
}
// Add and remove multiple days
if (index < (start - 1) && action === 'add') {
for (let i = index; i <= (start - 1); i++) {
this.weekdays[i].selected = true;
}
}
if (index > start && index < middle && action === 'remove') {
for (let i = start; i <= index; i++) {
this.weekdays[i].selected = false;
}
}
if (index > (end + 1) && action === 'add') {
for (let i = end + 1; i <= index; i++) {
this.weekdays[i].selected = true;
}
}
if (index < end && index >= middle && action === 'remove') {
for (let i = index; i <= end; i++) {
this.weekdays[i].selected = false;
}
}
// Add and remove single days
if ((index === (end + 1) || index === (start - 1)) || (index === end || index === start) && action === 'add') {
this.weekdays[index].selected = true;
}
if ((index === end || index === start) && action === 'remove') {
this.weekdays[index].selected = false;
}
},
inArray: function(needle) {
let length = this.weekdays.length;
for(let i = 0; i < length; i++) {
if(this.weekdays[i] === needle) return true;
}
return false;
},
key: function() {
return Math.random().toString(36).replace(/[^a-z0-9]+/g, '').substr(0, 10);
}
}
}
</script>
Can someone lend me a hand here as to why this is happening?
javascript vue.js
asked Nov 13 '18 at 16:49
Martyn BallMartyn Ball
1,36222551
Did you try addingkeyon the component element itself?
– Tomasz Rup
Nov 13 '18 at 16:54
Yeah, tried that :)
– Martyn Ball
Nov 13 '18 at 16:54
2
Also youre passing the same reference to an object here: :default-weekdays="response.weekdays" I dont know where "response" comes from, but youre basically modifying the same object pointer on all your components. Try making a copy of it default-weekdays="{...response.weekdays}" so that each component has a unique copy
– Marina Mosti
Nov 13 '18 at 17:02
1
Additionally, move "weekdays" from data to a computed property since it depends on a prop being passed or not. Im not 100% sure but it looks like youre falling into this IF every time because of how you declared it if (this.weekdays === undefined) {
– Marina Mosti
Nov 13 '18 at 17:04
1
PSSS. :key is a performance hint for vue so that it doesnt have to re render the whole list every time, and wont cause the problem you have. You have an issue with how your data is being handled, because of what I said in my second comment. Youre modifying pointers, not copies of the object. :)
– Marina Mosti
Nov 13 '18 at 17:06
|
show 5 more comments
0
0
0
i'm doing a for loop on an array, for each value i'm creating a component. I was under the impression that I need to put a key on the for loop so that Vue knows it is unique?
<div v-for="hours in location.hours" class="businessHours" :key="hours.id">
<business-hours :response="hours" :unique-key="uniqueKey" :default-weekdays="response.weekdays">
<div slot-scope="{ hours, weekdays, title, uniqueKey, toggle, inArray, componentKey }">
<div class="panel-heading v-center">
<div class="field">
Within this component I have got some logic that just selects/deselected checkboxes, however these 2 components seem to be linked. When I click checkboxes on one of them, the other one changes too!
This is my component:
<template>
<div>
<slot :hours="response" :weekdays="weekdays" :title="title" :toggle="toggle" :inArray="inArray" :componentKey="componentKey"></slot>
</div>
</template>
<script>
export default {
props: [ 'response', 'uniqueKey', 'defaultWeekdays' ],
data: function() {
return {
weekdays: this.response.weekdays,
componentKey: this.key()
}
},
created() {
if (this.weekdays === undefined) {
this.weekdays = this.defaultWeekdays;
}
},
methods: {
title: function() {
if (this.weekdays === undefined) return;
let selected = Object.keys(this.weekdays).filter((e) => { if (this.weekdays[e].selected) return e });
if (selected.length === 0) return;
let start = this.weekdays[parseInt(selected[0])].value;
let end = this.weekdays[parseInt(selected[selected.length - 1])].value;
if (start === end) {
return start.charAt(0).toUpperCase() + start.substring(1);
}
return start.charAt(0).toUpperCase() + start.substring(1) + ' - ' + end.charAt(0).toUpperCase() + end.substring(1);
},
toggle: function(index) {
let clicked = this.weekdays[index];
let action = clicked.selected ? 'remove' : 'add';
let selected = Object.keys(this.weekdays).filter((i) => { if (this.weekdays[i].selected) return i });
let start = parseInt(selected[0]);
let middle = parseInt(selected[Math.floor(selected.length / 2)]);
let end = parseInt(selected[selected.length - 1]);
if (isNaN(start) && isNaN(middle) && isNaN(end)) {
start = middle = end = index;
}
// Add and remove multiple days
if (index < (start - 1) && action === 'add') {
for (let i = index; i <= (start - 1); i++) {
this.weekdays[i].selected = true;
}
}
if (index > start && index < middle && action === 'remove') {
for (let i = start; i <= index; i++) {
this.weekdays[i].selected = false;
}
}
if (index > (end + 1) && action === 'add') {
for (let i = end + 1; i <= index; i++) {
this.weekdays[i].selected = true;
}
}
if (index < end && index >= middle && action === 'remove') {
for (let i = index; i <= end; i++) {
this.weekdays[i].selected = false;
}
}
// Add and remove single days
if ((index === (end + 1) || index === (start - 1)) || (index === end || index === start) && action === 'add') {
this.weekdays[index].selected = true;
}
if ((index === end || index === start) && action === 'remove') {
this.weekdays[index].selected = false;
}
},
inArray: function(needle) {
let length = this.weekdays.length;
for(let i = 0; i < length; i++) {
if(this.weekdays[i] === needle) return true;
}
return false;
},
key: function() {
return Math.random().toString(36).replace(/[^a-z0-9]+/g, '').substr(0, 10);
}
}
}
</script>
Can someone lend me a hand here as to why this is happening?
javascript vue.js
asked Nov 13 '18 at 16:49
Martyn BallMartyn Ball
1,36222551
i'm doing a for loop on an array, for each value i'm creating a component. I was under the impression that I need to put a key on the for loop so that Vue knows it is unique?
<div v-for="hours in location.hours" class="businessHours" :key="hours.id">
<business-hours :response="hours" :unique-key="uniqueKey" :default-weekdays="response.weekdays">
<div slot-scope="{ hours, weekdays, title, uniqueKey, toggle, inArray, componentKey }">
<div class="panel-heading v-center">
<div class="field">
Within this component I have got some logic that just selects/deselected checkboxes, however these 2 components seem to be linked. When I click checkboxes on one of them, the other one changes too!
This is my component:
<template>
<div>
<slot :hours="response" :weekdays="weekdays" :title="title" :toggle="toggle" :inArray="inArray" :componentKey="componentKey"></slot>
</div>
</template>
<script>
export default {
props: [ 'response', 'uniqueKey', 'defaultWeekdays' ],
data: function() {
return {
weekdays: this.response.weekdays,
componentKey: this.key()
}
},
created() {
if (this.weekdays === undefined) {
this.weekdays = this.defaultWeekdays;
}
},
methods: {
title: function() {
if (this.weekdays === undefined) return;
let selected = Object.keys(this.weekdays).filter((e) => { if (this.weekdays[e].selected) return e });
if (selected.length === 0) return;
let start = this.weekdays[parseInt(selected[0])].value;
let end = this.weekdays[parseInt(selected[selected.length - 1])].value;
if (start === end) {
return start.charAt(0).toUpperCase() + start.substring(1);
}
return start.charAt(0).toUpperCase() + start.substring(1) + ' - ' + end.charAt(0).toUpperCase() + end.substring(1);
},
toggle: function(index) {
let clicked = this.weekdays[index];
let action = clicked.selected ? 'remove' : 'add';
let selected = Object.keys(this.weekdays).filter((i) => { if (this.weekdays[i].selected) return i });
let start = parseInt(selected[0]);
let middle = parseInt(selected[Math.floor(selected.length / 2)]);
let end = parseInt(selected[selected.length - 1]);
if (isNaN(start) && isNaN(middle) && isNaN(end)) {
start = middle = end = index;
}
// Add and remove multiple days
if (index < (start - 1) && action === 'add') {
for (let i = index; i <= (start - 1); i++) {
this.weekdays[i].selected = true;
}
}
if (index > start && index < middle && action === 'remove') {
for (let i = start; i <= index; i++) {
this.weekdays[i].selected = false;
}
}
if (index > (end + 1) && action === 'add') {
for (let i = end + 1; i <= index; i++) {
this.weekdays[i].selected = true;
}
}
if (index < end && index >= middle && action === 'remove') {
for (let i = index; i <= end; i++) {
this.weekdays[i].selected = false;
}
}
// Add and remove single days
if ((index === (end + 1) || index === (start - 1)) || (index === end || index === start) && action === 'add') {
this.weekdays[index].selected = true;
}
if ((index === end || index === start) && action === 'remove') {
this.weekdays[index].selected = false;
}
},
inArray: function(needle) {
let length = this.weekdays.length;
for(let i = 0; i < length; i++) {
if(this.weekdays[i] === needle) return true;
}
return false;
},
key: function() {
return Math.random().toString(36).replace(/[^a-z0-9]+/g, '').substr(0, 10);
}
}
}
</script>
Can someone lend me a hand here as to why this is happening?
javascript vue.js
javascript vue.js
asked Nov 13 '18 at 16:49
Martyn BallMartyn Ball
1,36222551
asked Nov 13 '18 at 16:49
Martyn BallMartyn Ball
1,36222551
asked Nov 13 '18 at 16:49
Martyn BallMartyn Ball
1,36222551
asked Nov 13 '18 at 16:49
Martyn BallMartyn Ball
1,36222551
asked Nov 13 '18 at 16:49
Martyn BallMartyn Ball
1,36222551
1,36222551
Did you try addingkeyon the component element itself?
– Tomasz Rup
Nov 13 '18 at 16:54
Yeah, tried that :)
– Martyn Ball
Nov 13 '18 at 16:54
2
Also youre passing the same reference to an object here: :default-weekdays="response.weekdays" I dont know where "response" comes from, but youre basically modifying the same object pointer on all your components. Try making a copy of it default-weekdays="{...response.weekdays}" so that each component has a unique copy
– Marina Mosti
Nov 13 '18 at 17:02
1
Additionally, move "weekdays" from data to a computed property since it depends on a prop being passed or not. Im not 100% sure but it looks like youre falling into this IF every time because of how you declared it if (this.weekdays === undefined) {
– Marina Mosti
Nov 13 '18 at 17:04
1
PSSS. :key is a performance hint for vue so that it doesnt have to re render the whole list every time, and wont cause the problem you have. You have an issue with how your data is being handled, because of what I said in my second comment. Youre modifying pointers, not copies of the object. :)
– Marina Mosti
Nov 13 '18 at 17:06
|
show 5 more comments
Did you try addingkeyon the component element itself?
– Tomasz Rup
Nov 13 '18 at 16:54
Yeah, tried that :)
– Martyn Ball
Nov 13 '18 at 16:54
2
Also youre passing the same reference to an object here: :default-weekdays="response.weekdays" I dont know where "response" comes from, but youre basically modifying the same object pointer on all your components. Try making a copy of it default-weekdays="{...response.weekdays}" so that each component has a unique copy
– Marina Mosti
Nov 13 '18 at 17:02
1
Additionally, move "weekdays" from data to a computed property since it depends on a prop being passed or not. Im not 100% sure but it looks like youre falling into this IF every time because of how you declared it if (this.weekdays === undefined) {
– Marina Mosti
Nov 13 '18 at 17:04
1
PSSS. :key is a performance hint for vue so that it doesnt have to re render the whole list every time, and wont cause the problem you have. You have an issue with how your data is being handled, because of what I said in my second comment. Youre modifying pointers, not copies of the object. :)
– Marina Mosti
Nov 13 '18 at 17:06
Did you try adding
key on the component element itself?– Tomasz Rup
Nov 13 '18 at 16:54
Did you try adding
key on the component element itself?– Tomasz Rup
Nov 13 '18 at 16:54
Yeah, tried that :)
– Martyn Ball
Nov 13 '18 at 16:54
Yeah, tried that :)
– Martyn Ball
Nov 13 '18 at 16:54
2
2
Also youre passing the same reference to an object here: :default-weekdays="response.weekdays" I dont know where "response" comes from, but youre basically modifying the same object pointer on all your components. Try making a copy of it default-weekdays="{...response.weekdays}" so that each component has a unique copy
– Marina Mosti
Nov 13 '18 at 17:02
Also youre passing the same reference to an object here: :default-weekdays="response.weekdays" I dont know where "response" comes from, but youre basically modifying the same object pointer on all your components. Try making a copy of it default-weekdays="{...response.weekdays}" so that each component has a unique copy
– Marina Mosti
Nov 13 '18 at 17:02
1
1
Additionally, move "weekdays" from data to a computed property since it depends on a prop being passed or not. Im not 100% sure but it looks like youre falling into this IF every time because of how you declared it if (this.weekdays === undefined) {
– Marina Mosti
Nov 13 '18 at 17:04
Additionally, move "weekdays" from data to a computed property since it depends on a prop being passed or not. Im not 100% sure but it looks like youre falling into this IF every time because of how you declared it if (this.weekdays === undefined) {
– Marina Mosti
Nov 13 '18 at 17:04
1
1
PSSS. :key is a performance hint for vue so that it doesnt have to re render the whole list every time, and wont cause the problem you have. You have an issue with how your data is being handled, because of what I said in my second comment. Youre modifying pointers, not copies of the object. :)
– Marina Mosti
Nov 13 '18 at 17:06
PSSS. :key is a performance hint for vue so that it doesnt have to re render the whole list every time, and wont cause the problem you have. You have an issue with how your data is being handled, because of what I said in my second comment. Youre modifying pointers, not copies of the object. :)
– Marina Mosti
Nov 13 '18 at 17:06
|
show 5 more comments
0
active
oldest
votes
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
});
}
});
draft saved
draft discarded
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%2f53285844%2fvuejs-for-loop-creating-components-components-seem-to-be-linked%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53285844%2fvuejs-for-loop-creating-components-components-seem-to-be-linked%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
Did you try adding
keyon the component element itself?– Tomasz Rup
Nov 13 '18 at 16:54
Yeah, tried that :)
– Martyn Ball
Nov 13 '18 at 16:54
2
Also youre passing the same reference to an object here: :default-weekdays="response.weekdays" I dont know where "response" comes from, but youre basically modifying the same object pointer on all your components. Try making a copy of it default-weekdays="{...response.weekdays}" so that each component has a unique copy
– Marina Mosti
Nov 13 '18 at 17:02
1
Additionally, move "weekdays" from data to a computed property since it depends on a prop being passed or not. Im not 100% sure but it looks like youre falling into this IF every time because of how you declared it if (this.weekdays === undefined) {
– Marina Mosti
Nov 13 '18 at 17:04
1
PSSS. :key is a performance hint for vue so that it doesnt have to re render the whole list every time, and wont cause the problem you have. You have an issue with how your data is being handled, because of what I said in my second comment. Youre modifying pointers, not copies of the object. :)
– Marina Mosti
Nov 13 '18 at 17:06