Question

VueJS 应用程序中的双花括号不会显示来自 Axios 获取的数据

2021-08-11

960

vue.js axios

我想使用双花括号表示法在我的 VueJS 应用中显示从 Axios 数据提取中检索到的数据。我认为这很简单。但是，用于访问我的数据对象属性的点表示法不起作用。

知道为什么吗？

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

{ "code": "USD", "symbol": "&#36;", "rate": "46,531.5152", "description": "United States Dollar", "rate_float": 46531.5152 }

当我分别定义 {{ usd }} 和 {{ code }} 时，显示它们有效。但是，当我想显示 {{ usd.code }} 时，我收到错误：未捕获 TypeError：无法访问属性“code”，usd 为空。

我尝试用其他生命周期钩子替换 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>

提前致谢。

Answer 1

我怀疑这是因为 USD 最初是 null 。因此，当第一个HTML渲染尝试读取 usd.code 时，不能因为它不是对象。尝试以下内容：

＆lt; p＆gt; {{usd？ USD.Code：''}}＆lt;/p＆gt;

Answer 2

@paddotk 给出的答案是正确的，一定有效。

但我想假设性地扩展您的问题。想象一下，您从 API 中获取的数据量很大，需要使用多个状态对象或数组在 UI 上呈现。你现在会怎么做？在每个对象及其嵌套值上添加 三元运算符 或 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 语句。