时间戳

首页 > 解决方案 > 使用 VUE 在数组中显示数组

vue.js - 使用 VUE 在数组中显示数组

问题描述

如何在 VUE 中显示数组内部的数组？

我用下面的代码试过了，但似乎不对。

<table class="table table-border">
   <thead>
      <tr>
        <th v-for="(name, index) in attributes" v-html="attributes[index].name"></th>
      </tr>
   </thead>
   <tr v-for="(values, index) in attributes">
      <td v-for="(name, index) in values" v-html="values[index].name"></td>
   </tr></table>

标签： vue.js

解决方案

如果没有看到对象的结构，很难完全帮助您，另外您还想实现什么> 我看到了设置表格的基础知识，但是需要将数组的哪一部分应用于表格？

如果我有下面的对象（为了清楚起见，Typescript Type）：

    interface Parent {
         ID: string,
         Name: string,
         Age: number,
         ParentOf: Array<Child>
    }

     interface Child{
         Name: string,
         FavoriteNumbers: Array<number>
    }

下面我将遍历父母的孩子，以发现每个孩子最喜欢的数字。

<div>
    <div v-for="(child, index) in Parent.ParentOf">
        <p>{{Parent.Name}} <br />
        {{child.Name}} </p>
        <ul>
            <li v-for="number in child.FavoriteNumbers">
               Favorite Number: {{number}}   <!--We are iterating through an array of an array here -->
            </li>
        </ul>
    </div>
</div>

推荐阅读