VueJS 3 Composition API.有人能解释一下为什么这行不通吗?

Question

我正在加载一个简单的JSON文件，将其分配给一个响应变量，并将其显示在模板中。但是，它只能部分地工作。

{{ people }},{{ people.People }}和people.People在v-for环路中工作正常;但是访问people.People[0].FullName失败。但是为什么呢?如有任何见地，不胜感激。

这是我的。json

{
"People": [
{
"FullName": "The Json"
}, {
"FullName": "The Jetsons"
}
]
}

component.vue代码

<template>
<h1>Test</h1>
<div>
<p>{{ people }}</p> <!-- Works and displays: { "People": [ { "FullName": "The Json" }, { "FullName": "The Jetsons" } ] } -->
<p>{{ people.People }}</p> <!-- Works and displays: [ { "FullName": "The Json" }, { "FullName": "The Jetsons" } ] -->
<p>{{ people.People[0].FullName }}</p> FAILS - Uncaught TypeError: $setup.people.People is undefined
<p v-for="(item, idx) in people.People" :key="idx">
{{ item.FullName }} <!-- Works as expected -->
</p>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
name: "Test",
setup() {
const people = ref({});
fetch('http://localhost:3000/data/people.json')
.then(response => response.json())
.then(data => people.value = data);
return {
people
}
}
}
</script>
<style>
</style>```

Thanks

Answer 1

设置时间;在你的json被加载之前:people = {}，因此people.People[Ø]引发错误，因为people.People此时未定义

在你的例子中{{ people }}和{{ people.People }}显示一些东西因为它是响应性的你没有时间在json加载之前看到它

有几种方法可以处理这个问题。这里有两个

添加if

<p v-if="people.People">{{ people.People[0].FullName }}</p>

Init使用默认值

const people = ref({
People: []
});