在 vue js 3 中显示异步数据属性答案

【问题标题】：displaying async data's property in vuejs3在 vue js 3 中显示异步数据属性
【发布时间】：2021-02-21 22:23:47
【问题描述】：

如果我使用，我得到了以下示例代码：

 <p>{{usr[0]}}</p>

有效，但如果我参考标题，我得到一个“未捕获的类型错误：无法读取未定义的属性“标题”：

 <p>{{usr[0].title}}</p>

ncaught TypeError: Cannot read property 'title' of undefined

a sample code

处理这种情况的正确方法是什么？谢谢

【问题讨论】：

标签： vue.js vue-component vuejs3

【解决方案1】：

最快的方法是使用v-if来判断是否渲染到内容。

<p v-if="usr[0]">{{usr[0].title}}</p>

const TodoList = {
  data() {
    return {
      usr: []
    }
  },
  async mounted() {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos');
    let rslt = await response.json();
    this.usr = rslt
  }
}
const app = Vue.createApp(TodoList)
app.mount('#myapp')

<script src="https://unpkg.com/vue@next"></script>
<!-- page content -->
<div id="myapp">
  <p v-if="usr[0]">{{usr[0].title}}</p>
</div>

您还可以使用另一个变量来跟踪内容是否准备就绪。

【讨论】：

【解决方案2】：

最初您的数组是空的，并且数组索引 0 处的项目中没有名为 title 的属性，因此您可以添加一些条件渲染，例如：

 <p>{{usr.length && usr[0].title}}</p>

【讨论】：