[Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性 'BTC'”

Question

我目前正在使用 VueJS 创建一个使用 CryptoCompare API 的网站。它正确使用 API（它在页面上显示比特币的价格），但我收到错误消息：

"Cannot read property 'BTC' of undefined"

我已经阅读了其他答案，这是因为页面上的组件是在返回数据之前呈现的，但我不知道如何解决这个问题。我尝试使用v-if，但我不确定我是否正确，因为它似乎不起作用。

是否也可以在返回数据之前不渲染price-container？

HTML：

<div class="price-container">
   <p>
      <span class="price">{{ coins.DISPLAY.BTC.USD.PRICE }}</span>
   </p>
</div>

JS：

let CRYPTOCOMPARE_API_URI = "https://min-api.cryptocompare.com";
let UPDATE_INTERVAL = 60 * 1000;

let app = new Vue({
  el: "#app",
  data: {
    coins: {}
  },

  methods: {
    getCoins: function() {
      let self = this;
      axios
        .get(
          CRYPTOCOMPARE_API_URI +
            "/data/pricemultifull?fsyms=BTC,ETH,LTC,XRP,OMG,EOS,NEO,DASH,XMR&tsyms=USD"
        )
        .then(resp => {
          this.coins = resp.data;
        })
        .catch(err => {
          console.error(err);
        });
    }
  },

  created: function() {
    this.getCoins();
  }
});

setInterval(() => {
  app.getCoins();
}, UPDATE_INTERVAL);

Answer 1

如果您在span 元素上添加v-if，错误应该会消失。

if 应该只检查coins.DISPLAY，因为在链的下游会产生同样的错误。

<span class="price" v-if="coins.DISPLAY">{{ coins.DISPLAY.BTC.USD.PRICE }}</span>

这里有一个完整的example。