VueJS executing data function too late (?)

Question

EDIT: Solved thanks to @Mythos, but I'm very grateful to anyone who put their time into helping me, I was stuck on this for hours. Thanks a lot!

I have a Vue.js project created using vue-cli 4 and Vue 2. It seems like a v-for I'm using to render a list is getting data too late. This is how my component is set up:

import { readLocalStorage } from '../../public/localStorage.js'
    export default {
    name: 'lista',
    components: {
        codiceLista
     },
     data(){
        let salvati = readLocalStorage()
        return {
          codici: salvati
        }
     }
}

I have a component (codiceLista) which is rendered using v-for and data from the data function, and I'm experiencing a very weird behaviour. Whenever I manually reload the page nothing renders, telling me that my v-for is trying to access data that is not defined. However, if I remove the : in front of the v-for, which causes an error, add it again, the server auto-reloads and I see the list, but if I manually reload, without touching the code nothing renders and I get the same error in the console. Note that I have other elements in the page apart from the list, but when the error in the console appears even those don't render, even if completely unrelated and aren't using nothing from the component's data function. Bear with me, as I'm a beginner in Vue.js and new to programming in general. Any help would be kindly appreciated.

Try initializing `salvati` with null and and set it later in the mounted hook. — mokumus, Sep 06 '21 at 09:55
You should use lifecycle hooks when it comes to rendering and ensuring that data is present when it needs to be. Mounted, beforeUpdate etc. https://v3.vuejs.org/api/options-lifecycle-hooks.html — DragonInTraining, Sep 06 '21 at 09:58
Thanks everyone for your responses. @tho-masn The localStorage file is just functions upon functions, set up like this: `export function functionName(){ //function code here } ` If you still ned the content I can post the file. @mokumus I tried it, but it throws an error saying salvati is not defined: `data(){ let salvati = null return { codici: salvati } }, mounted(){ salvati = readLocalStorage() } ` Left out a part or I'll run out of characters. @DragonInTraining Thanks, I will try that. When is data() called? — , Sep 06 '21 at 10:08
try initializing it with an emty object or array: {} or []. Depends on your type of data that readLocalStorage returns — Hamza Mogni, Sep 06 '21 at 10:10
You just have to make sure `readLocalStorage()` returns not undefined but an empty array, if there is no localStorage content for example. That's why I asked for the localStorage file content. I assume the issue lies there. But you can also return `return { codici: salvati || [] }`. This should fix your error — tho-masn, Sep 06 '21 at 10:14

score 0 · Accepted Answer · edited Jul 16 '22 at 05:02

0

Don't add a : in front of v-for. : is a shorthand for v-bind. You can't bind v-for.

Also, initialize all the data first, and then you can populate it in lifecycle hooks.

data() {
  return {
    codeici: [],
  }
}
mounted() {
  this.codeici = readLocalStorage();
}

see Vue Lifecyle Hooks

edited Jul 16 '22 at 05:02

tony19

125,647
18
229
307

answered Sep 06 '21 at 10:25

Mythos

1,378
1
8
21

Thanks for your reply. I know it's a shorthand for v-bind, the reason I'm using it is, If I don't I get a compilation error: `error Custom elements in iteration require 'v-bind:key' directives` So that's why I was using it – Sep 06 '21 at 10:36
@FilippoSighinolfi You need to add `:key` directive to your codiceLista component. `` – Mythos Sep 06 '21 at 10:49
could you please explain what do you mean by this? Like I wouldn't know what index to specify, I need to loop over the entire array, so what index are you referring to in ? If I'm saying codice in codici, shouldn't codice represent the index? – Sep 06 '21 at 12:16
Sorry, reading again I got it. Thank a lot for your response. I'll edit the question to let everyone know that the problem's been solved. Thanks a lot for your help. – Sep 06 '21 at 12:37
Sure, no problem! – Mythos Sep 06 '21 at 18:46

VueJS executing data function too late (?)

1 Answers1