来自 api 的 Vue 3 data.name 在脚本 setup() 中未定义，但在模板中呈现答案

【问题标题】：Vue 3 data.name from api is undefined in script setup() but rendered in template来自 api 的 Vue 3 data.name 在脚本 setup() 中未定义，但在模板中呈现
【发布时间】：2021-09-09 07:08:05
【问题描述】：

我还是 Vue 新手，无法在 Vue3 组合 API 的脚本 setup() 中使用来自 api 的数据。

 const  data = computed(() => store.getters['projectSettings/getData']);

我通过 store.getters 获取数据并将其返回并在模板中呈现。效果很好。

<cc-headline tag="h1">{{ data.name }}</cc-headline>

但如果我想在 setup() 中使用相同的数据，它是未定义的

const  data = computed(() => store.getters['projectSettings/getData']);

console.log(data.name)

我做错了什么？

【问题讨论】：

你在设置钩子中返回data 吗？
是的，我确实在设置中返回它。它在模板中呈现

标签： vue.js vuex vuejs3 vue-composition-api

【解决方案1】：

如果您想在setup 函数中打印一个计算属性，您必须使用console.log(data.value.name) 访问它。

在模板中它可以工作，因为如果你通过{{ data }}渲染它，它会自动解析为data.value

【讨论】：

这个我也试过了，还是未定义
您可以添加加载数据的 getter 和操作的代码吗？
根据更新的代码，data 是一个数组，不是吗？在模板中，您将其视为对象。还是apiData的初始化不正确？

【解决方案2】：

解决办法是：

onUpdated(() => {
      console.log(data.value.name)
    })

不再是未定义的，从api返回值

【讨论】：