VueJS 执行数据函数太晚了（？）答案

【问题标题】：VueJS executing data function too late (?)VueJS 执行数据函数太晚了（？）
【发布时间】：2021-11-03 10:08:22
【问题描述】：

编辑：感谢@Mythos 解决了，但我非常感谢任何花时间帮助我的人，我被困在这个问题上几个小时。非常感谢！

我有一个使用 vue-cli 4 和 Vue 2 创建的 Vue.js 项目。似乎我用来呈现列表的 v-for 获取数据为时已晚。这就是我的组件的设置方式：

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

我有一个组件 (codiceLista)，它使用 v-for 和 data 函数中的数据呈现，我遇到了一个非常奇怪的行为。每当我手动重新加载页面时，什么都没有呈现，告诉我我的 v-for 正在尝试访问未定义的数据。但是，如果我删除 v-for 前面的 : 会导致错误，再次添加它，服务器会自动重新加载，我会看到列表，但是如果我手动重新加载，而不接触代码，则不会呈现任何内容，我得到控制台中的相同错误。请注意，除了列表之外，页面中还有其他元素，但是当控制台中出现错误时，即使这些错误也不会呈现，即使完全不相关并且没有使用组件数据函数中的任何内容。请多多包涵，因为我是 Vue.js 的初学者，并且对一般的编程很陌生。任何帮助将不胜感激。

【问题讨论】：

能否提供localStorage.js文件的内容？
尝试使用 null 初始化 salvati 并稍后在挂载的钩子中设置它。
在渲染和确保数据在需要时出现时，您应该使用生命周期挂钩。挂载、更新前等v3.vuejs.org/api/options-lifecycle-hooks.html
感谢大家的回复。 @tho-masn localStorage 文件只是函数上的函数，设置如下：export function functionName(){ //function code here } 如果您仍然需要内容，我可以发布文件。 @mokumus 我试过了，但它会抛出一个错误，说没有定义 salvati：data(){ let salvati = null return { codici: salvati } }, mounted(){ salvati = readLocalStorage() } 遗漏了一部分，否则我会用完字符。 @DragonInTraining 谢谢，我会试试的。何时调用 data()？
尝试使用 emty 对象或数组对其进行初始化：{} 或 []。取决于 readLocalStorage 返回的数据类型

标签： javascript vue.js vuejs2 vue-cli vue-cli-4

【解决方案1】：

不要在v-for 前面添加:。 : 是 v-bind 的简写。不能绑定v-for。

另外，先初始化所有数据，然后你可以在生命周期钩子中填充它。

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

见Vue Lifecyle Hooks

【讨论】：

感谢您的回复。我知道它是 v-bind 的简写，我使用它的原因是，如果我不这样做，我会收到编译错误：error Custom elements in iteration require 'v-bind:key' directives 所以这就是我使用它的原因
@FilippoSighinolfi 您需要将 :key 指令添加到您的 codiceLista 组件中。 <codeiceLista v-for="(item, index) in codeici" :key="index">
您能解释一下这是什么意思吗？就像我不知道要指定什么索引一样，我需要遍历整个数组，所以您在中指的是什么索引?如果我在 codici 中说 codice，那么 codice 不应该代表索引吗？
抱歉，再次阅读我明白了。非常感谢您的回复。我将编辑问题，让大家知道问题已解决。非常感谢您的帮助。
没问题！