如何使用v-for循环遍历Vue中的嵌套数组？

Question

我的目标是创建一个导航菜单，其中每个div将有一个标题和链接列表

<div>
  <h1>Header</h1>
    <ul>
      <li>
        <a href="#">Link</a>
      </li>
    </ul>
</div>

我想在Vue中将链接数据添加到data()中，并尝试了如下操作：

<script>
    export default {
        data() {
            return {
                links: {
                    columns: [
                        {
                            heading: 'Feature',
                            attr: [
                                {
                                    text: 'Something'
                                }
                            ]
                        }
                    ]
                }
            }
        }
    }
</script>

下面是尝试使用v-for的超文本标记语言

<template>
    <div class="pt-8 sm:pt-16 h-screen navigation-background-gradient">
        <nav class="mx-4 sm:mx-48">
            <div class="sm:grid sm:grid-cols-3 sm:gap-56">
                <div v-for="link in links.columns">
                    <h1 class="mb-5 text-white font-semibold font-montserrat tracking-wider uppercase text-2xl text-shadow-glow">{{ link.heading }}</h1>
                    <ul class="space-y-4">
                        <li>
                            <a class="block text-lg text-menu-link font-inter font-medium tracking-wider" href="#">{{ link.attr }}</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</template>

所以我可以访问heading，但是我不能访问attr.text

如果我回显attr.text，我会得到[ { "text": "Something" } ]，但我不确定如何到达它。我想我可能需要做另一个循环，因为它是一个数组，但我不能计算出正确的组合来使它显示。

我觉得我很接近并错过了一些明显的东西，但我看不到它。有人能告诉我我哪里做错了吗？

Answer 1

@Chris，attr是一个数组，所以你必须通过索引来访问它。因此，对于您的情况，您可以这样做

{{ link.attr[0].text }}

正如你的代码所示，attr数组只包含一项，所以我做了索引，就像获取数组的第一项一样，我们使用0 attr[0]。

如果您的attr数组包含多个元素，则必须遍历另一个循环，如下面的链接所示

Nested loop in Vue

Answer 2

多亏了@Dcoder，他给我指明了正确的方向，我才得以解决这个问题。我会在这里发帖，以防其他人遇到这一点-希望它能有所帮助！

我必须在<li>上执行另一个循环，但使用的是第一个循环中的数组(links.columns)，所以我的第二个循环包括：

<li v-for="attribute in link.attr">
  <a href="#">{{ attribute.text }}</a>
</li>

正如您所看到的，link存储数组数据的其余部分，并且由于attr也是一个数组，我可以遍历该数组。