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

如果在myString = "this is my striNg 7"; for (i = myString.length - 1; i > 0; i--) { if(myString[i]=='N'){ console.log('index of N is ' +i); } }元素上添加v-if，该错误应消失。

span仅应检查if，因为沿着链条走得更远会产生相同的错误。

coins.DISPLAY

这是一个带有完整example的小提琴。

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

1 个答案: