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

的HTML

<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数组仅包含一个项目，因此我完成了attr[0]的操作，以获取数组的第一项，我们使用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也是一个数组，因此我可以循环遍历。

我如何在V-for中的Vue中遍历此嵌套数组？

2 个答案: