在 Vue 3 中访问 api 数据答案

【问题标题】：Accessing api data in Vue 3在 Vue 3 中访问 api 数据
【发布时间】：2021-09-27 14:21:42
【问题描述】：

来自 API 的给定数据

async getStudentDetail(){


  try {
    const response = await Object.freeze(
      axios.get("/student/"+this.id+"/")
    );

    this.student = response.data
    this.parent = response.data.parent
    
    
    
  } catch (e) {
    console.log(e.response);
  }
  }

student 变量现在保存了这个

 {
"id": 1,
"parent": {
    "id": 2,
    "first_name": "Michael",
    "last_name": "Smith",
},     books: [{"id": 1, "name": "Counting Blessings"},{"id": 2,"name": "Breakaway"}]}

我可以通过调用来遍历书籍

v-for"student.books"

但无法访问父名称

{{student.parent.name}}

在 Vue 2 中，我可以将其放入变量 boy 中，并通过调用访问父级的名字

boy.parent.first_name

但是由于某种原因我不能在 Vue 3 上这样做，我不知道我是否做错了什么。但奇怪的是，如果我直接将父级放在不同的变量中，就像这样

this.parent = response.data.parent

我能够从这个新变量访问父值。我到底做错了什么？因为我在 Vue 2 中似乎没有这个问题。我错过了什么吗？这是我第一次使用 Vue 3，这就是为什么我只是认为它可能是它，但实际上并不是这样。

【问题讨论】：

向我们展示您获取响应的代码以及您如何使用该响应。

标签： javascript vue.js vuejs2 vuejs3

【解决方案1】：

我猜这个问题是由异步处理引起的。在vue2中，如果你在onMouted或beforeMounted选项中调用getStudentDetail方法，调用会在视图渲染之前被解析。因此，student 尚不包含数据。（我没用vue2，错了见谅）

vue3中只有setup方法。如果你需要确保在视图渲染之前调用完成，你需要将调用放在与 vue 2 相同的钩子中： https://v3.vuejs.org/api/composition-api.html#lifecycle-hooks

  setup() {
    onMounted(async () => {
      await getStudentDetail();
    })
  }
}

另一种方法是使用反应变量。因此，当异步方法被解析时，视图将被更新。 https://v3.vuejs.org/guide/reactivity-fundamentals.html#reactivity-fundamentals

【讨论】：