Question

我正在使用使用CryptoCompare API的Vue js框架创建一个小应用程序，但我无法从响应中检索数据。看看代码

<template>


<div class="container">
      <div v-for="(value,key) in cryptos" :key="key">
          {{value.LTC.FullName}}
      </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Main',
  data : () => ({
    cryptos: []
  }),

  created() {
      axios.get("https://www.cryptocompare.com/api/data/coinlist/")
        .then(response => {
            this.cryptos = response.data;
            console.log(response.data);
        })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .container{
        min-width:315px;
        min-height:560px;
        max-height: 560px;
        overflow-y: scroll;
        margin:auto;
        position: relative;
        background: #fff;
    }
</style>

以下是回复

    {
    "Response": "Success",
    "Message": "Coin list succesfully returned!",
    "BaseImageUrl": "https://www.cryptocompare.com",
    "BaseLinkUrl": "https://www.cryptocompare.com",
    "Data": {
        "LTC": {
            "Id": "3808",
            "Url": "/coins/ltc/overview",
            "ImageUrl": "/media/19782/ltc.png",
            "Name": "LTC",
            "CoinName": "Litecoin",
            "FullName": "Litecoin (LTC)",
            "Algorithm": "Scrypt",
            "ProofType": "PoW",
            "SortOrder": "2"
        }
        ...
    },
    "Type": 100
   }

显示错误：渲染错误：＆＃34; TypeError：无法读取属性＆＃39; FullName＆＃39;未定义＆＃34;

我还尝试了{{value.LTC["FullName"]}}和{{value["LTC"]["FullName"]}}，但仍然显示相同的错误。

Answer 1

1）api返回的响应是一个对象，您将密码定义为数组

2）{{value.Data.LTC.FullName}}是模板中应该引用的内容

这应该有效：

{{1}}

无法从Vue中的JSON对象检索数据

1 个答案: