时间戳

首页 > 解决方案 > VueJS 应用程序中的双花括号不会显示来自 Axios fetch 的数据

vue.js - VueJS 应用程序中的双花括号不会显示来自 Axios fetch 的数据

问题描述

我想通过使用双花括号表示法在我的 VueJS 应用程序中显示从 Axios 数据获取中检索到的数据。认为这将是直截了当的。但是，用于访问我的数据对象属性的点表示法将不起作用。

知道为什么吗？

在 Vue 实例的 data 属性中分配给“usd”的数据对象等于：

{ "code": "USD", "symbol": "$", "rate": "46,531.5152", "description": "United States Dollar", "rate_float": 46531.5152 }

当我分别定义它们时，显示 {{ usd }} 和 {{ code }} 有效。但是，当我想显示 {{ usd.code }} 时出现错误：Uncaught TypeError: can't access property "code", usd is null。

我尝试用其他生命周期钩子替换mounted()，但这没有用。beforeCreate() 和 create() 确实显示 {{ usd.code }} 但仍然抛出错误。

<!DOCTYPE html>
<html lang="en">
<body>
  
  <div id="app">
    
    <p>{{ usd }}</p>
    <p>{{ code }}</p>
    <!--
    <p>{{ usd.code }}</p>
    -->

  </div>

  <script src="https://unpkg.com/vue@3"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    Vue.createApp({

      data () {
        return {
          usd: null,
          code: null
        }
      },
      mounted () {

        axios
        .get('https://api.coindesk.com/v1/bpi/currentprice.json')
        .then(response => {
          this.usd = response.data.bpi.USD
          this.code = response.data.bpi.USD.code
        })

      }

    })
    .mount('#app')

  </script>

</body>
</html>

提前致谢。

标签： vue.jsaxios

解决方案

@paddotk 给出的答案是正确的，必须有效。

但我想假设性地扩展你的问题。想象一下，您从 API 获取的数据量更大，需要使用多个状态对象或数组在 UI 上呈现。你现在会怎么做？在每个对象及其嵌套值上添加ternary operator或声明？if-else在这里，上述解决方案将被视为一种不好的做法。

您可以做的是引入一个标志，例如isDataFetched在您的州，默认值为false. 现在，当您的 API 被获取时，将其状态更改为true.

现在在您的标记中，添加v-if对您必须呈现的父元素的检查，例如

<div v-if="isDataFetched">
   <p>{{ object.property }}</p>
   <p>{{ object.property }}</p>
   <div v-if="object.property"> // if it can't be check in .then
      <p>{{ object.property.property }}</p>
      <p>{{ object.property.property.property }}</p>
   </div>
</div>

这将为您省去编写内联条件代码的麻烦。尽管您仍然需要确保您的嵌套属性确实存在，但您可以在获取数据的地方执行此操作。如果数据是动态的，因此无法签入 .then 语句，那么请确保在您访问这些属性的父级上添加更多 v-if 语句。

推荐阅读