Vue 使用 v-for 迭代 API 响应的嵌套数组

Posted

技术标签:

【中文标题】Vue 使用 v-for 迭代 API 响应的嵌套数组【英文标题】:Vue use v-for to iterate over an nested array of API response 【发布时间】:2020-12-12 04:13:32 【问题描述】:

我开始学习 vue,我试着练习一下,但我被 for 循环卡住了。

我正在调用我为更好地理解数据处理而开发的 API。调用的输出是:

[
    
        "_id": "ID1",
        "customerID": "ASDF",
        "purchases": [
            
                "laptop": "DELL",
                "price": "500"
            ,
            
                "monitor": "DELL",
                "price": "200"
            
        ]
    ,
    
        "_id": "ID2",
        "customerID": "FDSA",
        "purchases": [
            
                "laptop": "MacBook",
                "price": "1800"
            ,
            
                "monitor": "DELL",
                "price": "300"
            
        ]
    
]

我的目的是用v-for遍历购买的数组,这样就可以显示json中每个条目的数组内容。

我使用的vue模板是:

<template>
  <div>
    <div class="card" v-for="data in purchases" :key="data.purchases">
        <div class="card-image">
          <div class="card-content">
            <div class="media">
              <div class="media-content">
                <p class="title is-4">PURCHASES</p>
                <div
                  class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd"
                >
                  <div class="column">Laptop: data.purchases[0].laptop</div>
                  <div class="column">Monitor: data.purchases[0].monitor</div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

vue 文件中的脚本:

<script>
import  ref  from "@vue/composition-api";

export default 
  setup() 
    const purchases = ref([]);
    const API_url = "http://localhost:8383/purchases";

    async function getData() 
      const reponse = await fetch(API_url);
      const json = await reponse.json();
      purchases.value = json;
      console.log(purchases);
    

    getData();

    return 
      purchases,
    ;
  ,
;
</script>

我知道我只显示数组的第一个元素,而这正是我的问题,如何使用 v-for 遍历整个数组。

非常感谢您的帮助:)

【问题讨论】:

【参考方案1】:

创建另一个嵌套的v-for 以循环遍历data.purchases

<template>
  <div>
    <div class="card" v-for="data in purchases" :key="data.purchases">
        <div class="card-image">
          <div class="card-content">
            <div class="media">
              <div class="media-content">
                <p class="title is-4">PURCHASES</p>
                <div
                  class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd"
                >
                <template v-for="purchase  in data.purchases">
                  <div class="column">Laptop: purchase.laptop</div>
                  <div class="column">Monitor: purchase.monitor</div>
               </template>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

【讨论】:

以上是关于Vue 使用 v-for 迭代 API 响应的嵌套数组的主要内容,如果未能解决你的问题,请参考以下文章

如何在嵌套数组(数组中的数组)上使用 v-for 指令进行迭代

Vue.js - v-for 不渲染 api 调用响应数据

从 API 响应中迭代嵌套的 Javascript 对象

Vue.js - 组件模板不使用 v-for 渲染

Vue.js v-for中能不能嵌套使用v-if

Vue.js v-for中能不能嵌套使用v-if