Vue.js 2 Alternative to use key as JSON.stringify(obj) to rerender child component on change of obj from xhr...

Multi tool use
Multi tool use












0














I need to rerender child component when the array passed by prop has any of its element changed from xhr request. The child component is passed an empty array (allFiles) at the beginning and inside the child component I used v-for to display a row for each array element. At any time user can add a new element to the array and that shows few information on each row. As soon as the element is added I make an xhr request to get additional information and when the information is returned I show the new information on the rows.



To achieve this on the child component that holds the rows of the array elements I passed :key="JSON.stringify(allFiles)"



The element looks like this:



<file-edit-list :all-files="allFiles" :key="JSON.stringify(allFiles)"></file-edit-list>


This works. However I have put a console.log(this.allFiles) at the created hook of the child element. I see a huge amount of rerender happening for the child component. For each line of the following for in loop where I map the response to the old array, I see a rerender.



for (const k in response) {
if (response[k]) {
this.allFiles[fileIndex][k] = response[k];
}
}


I don't think this is optimal. How can I make the performance better while keep all my functionality working as is.










share|improve this question
























  • from where are you getting fileIndex? please provide more code
    – Boussadjra Brahim
    Dec 27 '18 at 17:10










  • I make only one xhr at a time. On the component I have reactive property currentIndex. When I make an xhr I set the this.currentIndex to the index of the array element for which I am making the request. After the xhr returns response I increment the index and make another call. The code I have in my application is following. I put fileIndex to simplify as that is irrelevent to this question. for (const k in response) {if (response[k]) { this.allFiles[this.currentIndex][k] = response[k]; } } The thing that this code indicates is allFiles is getting modified.
    – atiqorin
    Dec 27 '18 at 17:29












  • please provide more code snippet in order to give a big picture
    – Boussadjra Brahim
    Dec 27 '18 at 17:43










  • I updated how the element html tag looks like. The whole component uses multiple reusable component and is over 200 lines of code. My question is not specific to the code I wrote. It is to ask if there is a better way to rerender vue child component without using JSON.stringify.
    – atiqorin
    Dec 27 '18 at 19:31






  • 1




    allFiles is array of IUploadFile(custom interface) before sending the xhr request I only know the file name. After the file is uploaded, server returns other properties for example GenreName, Artist etc. The for loop sets these. And as soon as one is updated, the child component rerender as the :key changes. After xhr I update 8 other properties and the whole component rerender 8 times. So if I upload 8 files, there are 65 rerender of the component. Where optimal is 9 render. Initial render and 8 render after each file uploads. I consider this amount as huge amount of rerender
    – atiqorin
    Dec 27 '18 at 20:36
















0














I need to rerender child component when the array passed by prop has any of its element changed from xhr request. The child component is passed an empty array (allFiles) at the beginning and inside the child component I used v-for to display a row for each array element. At any time user can add a new element to the array and that shows few information on each row. As soon as the element is added I make an xhr request to get additional information and when the information is returned I show the new information on the rows.



To achieve this on the child component that holds the rows of the array elements I passed :key="JSON.stringify(allFiles)"



The element looks like this:



<file-edit-list :all-files="allFiles" :key="JSON.stringify(allFiles)"></file-edit-list>


This works. However I have put a console.log(this.allFiles) at the created hook of the child element. I see a huge amount of rerender happening for the child component. For each line of the following for in loop where I map the response to the old array, I see a rerender.



for (const k in response) {
if (response[k]) {
this.allFiles[fileIndex][k] = response[k];
}
}


I don't think this is optimal. How can I make the performance better while keep all my functionality working as is.










share|improve this question
























  • from where are you getting fileIndex? please provide more code
    – Boussadjra Brahim
    Dec 27 '18 at 17:10










  • I make only one xhr at a time. On the component I have reactive property currentIndex. When I make an xhr I set the this.currentIndex to the index of the array element for which I am making the request. After the xhr returns response I increment the index and make another call. The code I have in my application is following. I put fileIndex to simplify as that is irrelevent to this question. for (const k in response) {if (response[k]) { this.allFiles[this.currentIndex][k] = response[k]; } } The thing that this code indicates is allFiles is getting modified.
    – atiqorin
    Dec 27 '18 at 17:29












  • please provide more code snippet in order to give a big picture
    – Boussadjra Brahim
    Dec 27 '18 at 17:43










  • I updated how the element html tag looks like. The whole component uses multiple reusable component and is over 200 lines of code. My question is not specific to the code I wrote. It is to ask if there is a better way to rerender vue child component without using JSON.stringify.
    – atiqorin
    Dec 27 '18 at 19:31






  • 1




    allFiles is array of IUploadFile(custom interface) before sending the xhr request I only know the file name. After the file is uploaded, server returns other properties for example GenreName, Artist etc. The for loop sets these. And as soon as one is updated, the child component rerender as the :key changes. After xhr I update 8 other properties and the whole component rerender 8 times. So if I upload 8 files, there are 65 rerender of the component. Where optimal is 9 render. Initial render and 8 render after each file uploads. I consider this amount as huge amount of rerender
    – atiqorin
    Dec 27 '18 at 20:36














0












0








0







I need to rerender child component when the array passed by prop has any of its element changed from xhr request. The child component is passed an empty array (allFiles) at the beginning and inside the child component I used v-for to display a row for each array element. At any time user can add a new element to the array and that shows few information on each row. As soon as the element is added I make an xhr request to get additional information and when the information is returned I show the new information on the rows.



To achieve this on the child component that holds the rows of the array elements I passed :key="JSON.stringify(allFiles)"



The element looks like this:



<file-edit-list :all-files="allFiles" :key="JSON.stringify(allFiles)"></file-edit-list>


This works. However I have put a console.log(this.allFiles) at the created hook of the child element. I see a huge amount of rerender happening for the child component. For each line of the following for in loop where I map the response to the old array, I see a rerender.



for (const k in response) {
if (response[k]) {
this.allFiles[fileIndex][k] = response[k];
}
}


I don't think this is optimal. How can I make the performance better while keep all my functionality working as is.










share|improve this question















I need to rerender child component when the array passed by prop has any of its element changed from xhr request. The child component is passed an empty array (allFiles) at the beginning and inside the child component I used v-for to display a row for each array element. At any time user can add a new element to the array and that shows few information on each row. As soon as the element is added I make an xhr request to get additional information and when the information is returned I show the new information on the rows.



To achieve this on the child component that holds the rows of the array elements I passed :key="JSON.stringify(allFiles)"



The element looks like this:



<file-edit-list :all-files="allFiles" :key="JSON.stringify(allFiles)"></file-edit-list>


This works. However I have put a console.log(this.allFiles) at the created hook of the child element. I see a huge amount of rerender happening for the child component. For each line of the following for in loop where I map the response to the old array, I see a rerender.



for (const k in response) {
if (response[k]) {
this.allFiles[fileIndex][k] = response[k];
}
}


I don't think this is optimal. How can I make the performance better while keep all my functionality working as is.







javascript typescript vue.js vuejs2






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Dec 27 '18 at 19:29

























asked Dec 27 '18 at 16:40









atiqorin

764




764












  • from where are you getting fileIndex? please provide more code
    – Boussadjra Brahim
    Dec 27 '18 at 17:10










  • I make only one xhr at a time. On the component I have reactive property currentIndex. When I make an xhr I set the this.currentIndex to the index of the array element for which I am making the request. After the xhr returns response I increment the index and make another call. The code I have in my application is following. I put fileIndex to simplify as that is irrelevent to this question. for (const k in response) {if (response[k]) { this.allFiles[this.currentIndex][k] = response[k]; } } The thing that this code indicates is allFiles is getting modified.
    – atiqorin
    Dec 27 '18 at 17:29












  • please provide more code snippet in order to give a big picture
    – Boussadjra Brahim
    Dec 27 '18 at 17:43










  • I updated how the element html tag looks like. The whole component uses multiple reusable component and is over 200 lines of code. My question is not specific to the code I wrote. It is to ask if there is a better way to rerender vue child component without using JSON.stringify.
    – atiqorin
    Dec 27 '18 at 19:31






  • 1




    allFiles is array of IUploadFile(custom interface) before sending the xhr request I only know the file name. After the file is uploaded, server returns other properties for example GenreName, Artist etc. The for loop sets these. And as soon as one is updated, the child component rerender as the :key changes. After xhr I update 8 other properties and the whole component rerender 8 times. So if I upload 8 files, there are 65 rerender of the component. Where optimal is 9 render. Initial render and 8 render after each file uploads. I consider this amount as huge amount of rerender
    – atiqorin
    Dec 27 '18 at 20:36


















  • from where are you getting fileIndex? please provide more code
    – Boussadjra Brahim
    Dec 27 '18 at 17:10










  • I make only one xhr at a time. On the component I have reactive property currentIndex. When I make an xhr I set the this.currentIndex to the index of the array element for which I am making the request. After the xhr returns response I increment the index and make another call. The code I have in my application is following. I put fileIndex to simplify as that is irrelevent to this question. for (const k in response) {if (response[k]) { this.allFiles[this.currentIndex][k] = response[k]; } } The thing that this code indicates is allFiles is getting modified.
    – atiqorin
    Dec 27 '18 at 17:29












  • please provide more code snippet in order to give a big picture
    – Boussadjra Brahim
    Dec 27 '18 at 17:43










  • I updated how the element html tag looks like. The whole component uses multiple reusable component and is over 200 lines of code. My question is not specific to the code I wrote. It is to ask if there is a better way to rerender vue child component without using JSON.stringify.
    – atiqorin
    Dec 27 '18 at 19:31






  • 1




    allFiles is array of IUploadFile(custom interface) before sending the xhr request I only know the file name. After the file is uploaded, server returns other properties for example GenreName, Artist etc. The for loop sets these. And as soon as one is updated, the child component rerender as the :key changes. After xhr I update 8 other properties and the whole component rerender 8 times. So if I upload 8 files, there are 65 rerender of the component. Where optimal is 9 render. Initial render and 8 render after each file uploads. I consider this amount as huge amount of rerender
    – atiqorin
    Dec 27 '18 at 20:36
















from where are you getting fileIndex? please provide more code
– Boussadjra Brahim
Dec 27 '18 at 17:10




from where are you getting fileIndex? please provide more code
– Boussadjra Brahim
Dec 27 '18 at 17:10












I make only one xhr at a time. On the component I have reactive property currentIndex. When I make an xhr I set the this.currentIndex to the index of the array element for which I am making the request. After the xhr returns response I increment the index and make another call. The code I have in my application is following. I put fileIndex to simplify as that is irrelevent to this question. for (const k in response) {if (response[k]) { this.allFiles[this.currentIndex][k] = response[k]; } } The thing that this code indicates is allFiles is getting modified.
– atiqorin
Dec 27 '18 at 17:29






I make only one xhr at a time. On the component I have reactive property currentIndex. When I make an xhr I set the this.currentIndex to the index of the array element for which I am making the request. After the xhr returns response I increment the index and make another call. The code I have in my application is following. I put fileIndex to simplify as that is irrelevent to this question. for (const k in response) {if (response[k]) { this.allFiles[this.currentIndex][k] = response[k]; } } The thing that this code indicates is allFiles is getting modified.
– atiqorin
Dec 27 '18 at 17:29














please provide more code snippet in order to give a big picture
– Boussadjra Brahim
Dec 27 '18 at 17:43




please provide more code snippet in order to give a big picture
– Boussadjra Brahim
Dec 27 '18 at 17:43












I updated how the element html tag looks like. The whole component uses multiple reusable component and is over 200 lines of code. My question is not specific to the code I wrote. It is to ask if there is a better way to rerender vue child component without using JSON.stringify.
– atiqorin
Dec 27 '18 at 19:31




I updated how the element html tag looks like. The whole component uses multiple reusable component and is over 200 lines of code. My question is not specific to the code I wrote. It is to ask if there is a better way to rerender vue child component without using JSON.stringify.
– atiqorin
Dec 27 '18 at 19:31




1




1




allFiles is array of IUploadFile(custom interface) before sending the xhr request I only know the file name. After the file is uploaded, server returns other properties for example GenreName, Artist etc. The for loop sets these. And as soon as one is updated, the child component rerender as the :key changes. After xhr I update 8 other properties and the whole component rerender 8 times. So if I upload 8 files, there are 65 rerender of the component. Where optimal is 9 render. Initial render and 8 render after each file uploads. I consider this amount as huge amount of rerender
– atiqorin
Dec 27 '18 at 20:36




allFiles is array of IUploadFile(custom interface) before sending the xhr request I only know the file name. After the file is uploaded, server returns other properties for example GenreName, Artist etc. The for loop sets these. And as soon as one is updated, the child component rerender as the :key changes. After xhr I update 8 other properties and the whole component rerender 8 times. So if I upload 8 files, there are 65 rerender of the component. Where optimal is 9 render. Initial render and 8 render after each file uploads. I consider this amount as huge amount of rerender
– atiqorin
Dec 27 '18 at 20:36

















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


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53948182%2fvue-js-2-alternative-to-use-key-as-json-stringifyobj-to-rerender-child-compone%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown






























active

oldest

votes













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.





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.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53948182%2fvue-js-2-alternative-to-use-key-as-json-stringifyobj-to-rerender-child-compone%23new-answer', 'question_page');
}
);

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







2AFRAP wVyiLCV60sE3WeIXRJi7dJA2uI2mV,xEQqOelGZz YcEU47k,Rry0cDediU
u7yBswdlIg7Z NIAnY JkB 5M9dJUiALX76 UFrMhTLwLFfqoecLNzNl oMJIcORJRTP6upqZkr

Popular posts from this blog

Monofisismo

Angular Downloading a file using contenturl with Basic Authentication

Olmecas