如何使用 vue js 循环嵌套 json 响应

Question

我实际上是 Vue JS 的新手，所以我在使用 v-for 循环 api 响应时遇到了一些问题这是我的 html

获取硬币数据

<div v-for="coin in coinsData">{{coinsData.data.coins.name}}</div>

我的javascript:

 var app = new Vue({
        el: '#app',
        data: {
            coinsData: []
        },
        methods: {
    getCoinsData() {
      fetch("https://api.coinranking.com/v1/public/coins")
        .then(response => response.json())
        .then(data => (this.coinsData = data));
    }
  }
    })

我要循环的响应位于 https://api.coinranking.com/v1/public/coins 它太大了，所以我没有把它贴在这里:)

Answer 1

像created一样在生命周期钩子中调用方法。并确保您得到正确的回应属性； coins 实际上是响应中的 3 层深度：

var app = new Vue({
  el: '#app',
  data: {
    coinsData: []
  },
  methods: {
    getCoinsData() {
      fetch("https://api.coinranking.com/v1/public/coins")
        .then(response => response.json())
        .then(json => this.coinsData = json.data.coins);
    }
  },
  created() {
    this.getCoinsData();
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="coin in coinsData">{{ coin.name }}</div>
</div>

如何使用 vue js 循环嵌套 json 响应

how to loop through nested json response with vue js

javascript

vue.js

vue-component

vuejs2

v-for