Question

如何在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>

Answer 1

如果不了解对象的结构，很难完全帮助您，此外，您还想达到什么目的>我看到了建立表的基础知识，但是数组的哪一部分需要应用于表？

如果我下面有对象（为清晰起见，请输入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>

使用VUE在数组内部显示数组

1 个答案: