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.
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();
}