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

Posted 2023-02-16

【中文标题】VueJS 执行数据函数太晚了（？）

【英文标题】：VueJS executing data function too late (?)

【发布时间】：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 返回的数据类型

【参考方案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 不应该代表索引吗？

抱歉，再次阅读我明白了。非常感谢您的回复。我将编辑问题，让大家知道问题已解决。非常感谢您的帮助。

没问题！