Vue.js - 显示另一个数组中嵌套数组的详细信息

Question

我想在我的结果数组中显示我的关系值。 我的结果看起来像这样。

 "counciler": [
        {
            "id": 1,
            "name": "family",
            "description": "test description here",
            "created_at": "2020-04-16T07:57:31.000000Z",
            "updated_at": "2020-04-16T07:57:31.000000Z",
            "deleted_at": null,
            "users": [
                {
                    "id": 8,
                    "name": "stack change",
                    "email": "stack123@test.com",
                    "phone": "000000000",
                    "profile_image": null,
                    "address": null,
                    "user_type": "counciler",
                    "email_verified_at": null,
                    "created_at": "2020-04-16T13:32:51.000000Z",
                    "updated_at": "2020-04-16T13:32:51.000000Z",
                    "deleted_at": null,
                    "pivot": {
                        "category_id": 1,
                        "user_id": 8
                    }
                }                
            ]
        }
    ]

我的问题是我想将我的用户数组详细信息放入v-for以列出该类别中的所有用户。 我怎样才能实现这一目标？

我也试过这个但不工作

<div v-for="user in counciler.users" :key="user.id"></div>

Answer 1

首先，您应该遍历counciler数组，然后遍历用户项：

<template v-for="counc in counciler"
    <div v-for="user in counc.users" :key="user.id"></div>

</template>

Answer 2

您尝试访问counciler.users但这不存在，因为 Counciler 是一个数组，而不是 object。 要么您需要遍历counciler ，然后是其他用户。 或者只是 select 第一个 object 像这样： counciler[0].users