javascript - 如何在 Vue.js 中使用 v-for 循环嵌套导航？

Question

我正在尝试使用 Vue.js 设置多级导航。

当我尝试在父导航元素的 v-for 中使用 v-for 时，Vue 会抛出错误并显示 item is undefined.

HTML:

<nav id="hf-nav">
  <a v-for="item in itemLinks" :href="`${item.link}`"></a>
    {{ item.title }}
    <nav v-if="item.subItems">
      <a v-for="sub in item.subItems" :href="`${sub.link}`">{{ sub.title }}</a>
    </nav>
  </a>
</nav>

JavaScript:

new Vue({
  el: '#hf-main',
  data: {
    homepage: true,
    itemLinks: [
      { title: 'Home', link: './' },
      {
        title: 'Diensten',
        link: './diensten',
        subItems: [
          { title: 'Elektromontage', link: './elektromontage' },
          { title: 'Installatietechniek', link: './installatietechniek' },
          { title: 'Schoonmaak', link: './schoonmaak' },
          { title: 'Overige diensten', link: './overige-diensten' },
        ],
      },
      { title: 'Over H&F', link: './over-hf' },
      { title: 'Contact', link: './contact' },
    ],
  },
})

我希望 Vue 循环并检查 itemLinks 对象内部是否有第二个级别，如果有，我希望 Vue 执行另一个循环。

Answer 1

问题是关闭</a>在此行末尾标记:

<a v-for="item in itemLinks" :href="`${item.link}`">{{ item.title }}</a>

item对于v-for只会在此标记的范围内定义，因此后面的行不会知道任何有关它的信息。

我的猜测是您的目标是:

<nav id="hf-nav">
    <template v-for="item in itemLinks">
        <a :href="`${item.link}`">{{ item.title }}</a>
        <nav v-if="item.subItems">
            <a v-for="sub in item.subItems" :href="`${sub.link}`">{{ sub.title }}</a>
        </nav>
    </template>
</nav>

令我有点惊讶的是，您的编辑器没有警告您 HTML 标记不平衡。收盘</a>代码倒数第二行上的标记没有匹配的开始标记。

顺便说一下，:href="`${item.link}`" 不需要使用反引号。 ，你可以写:href="item.link" 。 :href="sub.link" 同样如此.