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

Posted 2023-02-16

【中文标题】如何使用vue js循环嵌套的json响应

【英文标题】：how to loop through nested json response with vue js

【发布时间】：2021-03-01 16:14:25

【问题描述】：

我实际上是 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 它很大，所以我没有把它贴在这里:)

【参考方案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>

【讨论】：

没问题。哦，我本可以保持方法不变并将模板更改为：<div v-for="coin in coinsData.data.coins"> coin.name </div> 我现在看到您知道对象结构了。