Vue：通过 api 访问值（嵌套）

Question

您好 Stackoverflow 社区，

在我的模板中，我尝试显示通过 api 调用接收的数据。当我记录 api 获取响应时，这是我收到的：

现在我尝试使用以下代码在位置显示数据： {{ userdetails.location.location_name }}

我的脚本如下所示：

data() {
    return {
      userdetails: [],
    };
  },
  methods: {
    getUserData() {
      DataService.getUserById()
        .then((response) => {
          this.userdetails = response.data;
          console.log(response);
        }) 

...

  created() {
    this.getUserData();
  },

奇怪的是，我可以在我的应用程序中看到 location_name。但我也收到错误：

我想我在某个地方弄错了，但我找不到。你知道我做错了什么吗？

提前感谢您的所有提示！

Answer 1

一开始，当模板试图访问userdetails.location.location_name时，它是一个空列表，所以你会看到错误。只有在 DataService 更新 userdetails 后，嵌套属性才会存在。

防止这种情况的最简单方法是从 userdetails 开始，作为“虚假”的东西，然后使用 v-if 来确定是否渲染：

<div v-if="userdetails">{{userdetails.location.location_name}}</div>

data() {
return {
  userdetails: undefined,
};

},

但是请注意，如果您的 DataService 可能会返回一个没有 location 属性的字典，您将需要在 v-if 中进行更多测试以确定它是否可以呈现。