Vue：访问超过 api 的值（嵌套）

Question

嗨，Whosebug 社区，

在我的模板中，我尝试显示通过 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 作为 'falsey' 开始，然后使用 v-if 来确定是否渲染：

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

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

},

但是请注意，如果您的 DataService 可以 return 一个没有 location 属性的字典，您将需要在 v-if判断是否可以渲染。

Vue：访问超过 api 的值（嵌套）

Vue: Access values over api (nested)

javascript

api

vue.js

mustache